布局 移动 网 站 和 移动 应 用 ， 切 中 目前 企业 最 热 的 开发 需求 


全 面 详解 Apache Cordova 移 动 跨 平台 开发 框架 与 开发 方法 
低 成 本 ， 快 速 开 发 ， 还 能 跨 平台 ， 利 用 最 好 最 流行 的 技术 进行 实战 演练 i 
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内 容 简 介 


Cordova 是 一 款 优秀 的 移动 跨 平 台 开 发 框架 ， 开 发 者 通过 它 能 够 快速 地 将 Web 应 用 打包 成 在 各 个 平台 
上 运行 的 本 地 APP。 

本 书 分 3 篇 共 16 章 ， 第 一 篇 是 入 门 篇 ， 包 括 了 Cordova 的 小 伙伴 们 、 在 安 卓 和 iOS 开发 环境 下 的 配 
置 、 对 HTML 5 前 景 的 简单 介绍 。 第 二 篇 是 基础 知识 篇 ， 包 含 了 本 地 事件 设备 信息 、 通 讯 录 、 加 速度 传 感 
器 、 设 备 传感器 、 音 频 、 文 件 、 多 媒体 资源 等 Cordova 中 API 的 实例 。 第 三 篇 是 项 目 实战 篇 ， 包 括 简单 的 
游戏 (Flappy Bird)、 新 闻 客 户 端 ， 以 及 结合 jQuery Mobile 制作 的 号 码 本 。 

本 书 内 容 详 尽 、 实 例 丰 富 ， 适 合 Cordova 跨 平 台 APP 开发 的 初学 者 ， 尤 其 是 在 校 学 生 ， 以 及 有 意 在 互 
联网 时 代 捞 到 第 一 桶 金 的 创业 者 。 
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有 I 吾 


Cordova 是 一 球 人 简单 、 易 上 手 的 移动 跨 平台 开发 框架 ， 也 是 Adobe 公司 极力 推荐 的 一 于 
开发 框架 。 它 具有 开发 效率 高 、 上 和 手 人 简单 以 及 一 次 部 区 七 大 平台 全 部 兼容 等 优点 。 巡 憾 的 是 
由 于 国内 仍然 缺少 一 套 完整 的 Cordova 教程 ， 使 得 它 虽 然 已 经 被 许多 开发 者 认识 ， 却 始终 难 
以 真正 推广 开 来 。 本 书 的 出 现 将 弥补 这 一 遗憾 。 本 书 全 和 面 地 介绍 了 Cordova 的 API 使 用 、 
Cordova 插件 的 编写 方法 、 利 用 JavaScript 获取 信息 的 方法 ， 以 及 Cordova 与 jQuery Mobile 
相互 配合 使 用 的 方法 ， 力 求 让 本 书 的 读者 能 举一反三 ， 并 最 终 实现 目 己 的 梦想 。 


本 书 特色 


1. 内 容 丰 富 ， 知 识 全 面 

本 书 采 用 从 易 到 难 、 实 例 结合 理论 的 方式 进行 讲解 ， 内 容 几 乎 涉及 了 Cordova 的 各 个 方 
而 。 

2. 循序 渐进 ， 由 浅 入 深 

为 了 方便 读者 学 习 ， 本 书 首先 介绍 了 一 些 基本 常识 ， 如 什么 是 HTML 5 以 及 Cordova 配 
置 等 内 容 ， 然 后 开始 使 用 Cordova 中 的 API 实现 一 些小 的 例子 ， 最 终 过 渡 到 真正 利用 
Cordova 实现 完整 的 应 用 。 

3. 格式 统一 ， 讲 解 规范 

书 中 每 个 知识 点 都 给 出 了 详尽 的 操作 示例 供 读者 参考 ， 通 过 实践 可 以 使 读者 更 清晰 地 了 
解 每 个 知识 点 的 细节 ， 提 高 学 习 效 率 。 

4. 内 容 详 尽 ， 方 便 学 习 

虽然 Cordova 能 够 实现 路 平台 的 功能 ， 但 是 目前 它 确 实 还 有 不 够 完善 的 地 方 ， 许 多 读者 
在 学 习 时 可 能 会 遇 到 不 知名 的 “错误 ”而 导致 中 途 放 弃 。 本 书 根 据 作者 的 多 年 经 验 指出 一 些 
可 能 由 于 Cordova 或 者 安 续 系统 本 身 的 原因 造成 的 错误 ， 力 求 使 读者 少 走 这 路、 高效 学 习 。 

5. 案例 精 讲 ， 深 入 剖析 

本 书 的 每 个 知识 点 都 是 通过 实例 来 介绍 ， 使 读者 在 学 习 每 个 知识 点 时 都 能 够 通过 动手 来 
加 深 印 象 。 本 书 第 三 篇 的 三 个 项 目 使 读者 能 够 有 机 会 理解 到 真实 项 目 和 知识 点 的 区 别 ， 并 切 
实 掌握 利用 Cordova 进行 应 用 开发 的 精髓 。 
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本 书 结构 


本 书 分 3 篇 共 16 章 ， 主 要 章节 规划 如 下 。 

第 一 篇 (第 1 章 ~ 第 3 章 ) 入 门 篇 

在 学 习 之 前 进行 一 些 前 置 知 识 的 介绍 ， 包 括 : 什么 是 Cordova、 怎 样 使 用 Cordova 以 及 
跨 平台 的 HTML 5 等 内 容 。 本 篇 最 后 总 览 了 Cordova 所 提供 的 API， 让 读者 在 学 习 具 体 知 识 
点 之 前 先 对 Cordova 有 一 个 大 概 的 了 解 。 

第 二 篇 (第 4 章 ~ 第 13 章 ) 基础 知识 篇 

介绍 了 Cordova 中 的 API， 包 括 事件 管理 、 本 地 存储 、 音 视频 处 理 、 文 件 管理 等 内 容 ， 
并 结合 作者 本 人 的 经 验 给 出 了 使 用 建议 。 

第 三 篇 〈 第 14 章 ~ 第 16 章 ) 项 目 实 战 

本 篇 学 习 三 个 利用 Cordova 实现 的 项 目 : Flappy Bird (像素 鸟 ) 游戏 、 新 闻 客 户 端 、 号 
码 本 ， 能 够 让 读者 从 学 习 知 识 转化 到 项 目 实 战 中 去 ， 真 正 将 所 学 的 知识 加 以 应 用 。 


本 书 读者 
@ Android、iOS 移动 产品 开发 人 员 
@ HTML5、HTML 移动 产品 开发 人 员 
@ 跨 平台 移动 开发 初学 者 
@ 有 好 的 想法 但 是 由 于 技术 限制 难以 实现 的 移动 产品 创业 者 
@ 互联 网 个 人 从 业者 
@ 高 等 院 校 和 培训 机 构 的 师 生 


代码 下 载 


本 书 代 人 码 下 载 链接 (注意 数字 与 字母 大 小 写 ) 为 : 
https://pan.baidu.com/s/1c2Ijwpa (密码 : kkah ) 
如 果 下 载 有 问题 ， 请 联系 电子 邮箱 booksaga@163.com， 邮 件 主题 为 “Cordova 代码 ”。 


本 书 作者 


本 书 第 1~15 半 由 平 项 山 学 院 的 王 亚 飞 主笔 编写 ， 新 版 本 测试 由 特 邀 作者 王 洪 飞 完 成 ， 
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Apache 收购 PhoneGap 后 出 现 了 一 段 时 间 的 平台 混乱 ， 很 多 人 不 知道 是 选择 PhoneGap， 
还 是 其 他 项 目 ， 但 随 着 Cordova 的 兴起 ， 越 来 越 多 人 坚定 地 选择 了 Cordova。 其 实 Cordova 是 
贡献 给 Apache 后 的 开源 项 目 ， 是 从 PhoneGap 中 抽出 的 核心 代码 ， 是 驱动 PhoneGap 的 核心 
引擎 。 





本 章 的 主要 知识 点 有 : 


@ 什么 是 Cordova。 
@ (Cordova 的 特色 。 
@ 与 Cordova 配套 使 用 的 一 些 UI 框架 。 


1 | 认识 Cordova 


Cordova 的 全 称 是 _ Apache Cordova ， 是 一 款 开 放 源 代码 的 移动 开发 框架 ， 原 名 
PhoneGap。 


1.1.1 Cordova 的 发 展 

Cordova 起 源 于 PhoneGap， 那 先 看 看 PhoneGap 的 发 展 。 

2008 年 8 月 ， 世 界 上 第 一 段 PhoneGap 代码 诞生 了 ， 出 现 的 原因 是 一 名 iOS 程序 员 无 法 
忍耐 Object-C 生硬 而 又 陌生 的 语法 。 而 这 名 程序 员 又 恰恰 注意 到 了 Web 脚本 伟大 的 前 景 ， 他 
发 现 Object-C 显然 不 如 简单 的 HTML+JavaScript 容易 理解 ， 而 相对 于 熟练 的 Object-C 程序 
员 ， 显 然 熟练 的 前 端 开 发 者 更 容易 找到 也 更 容易 培训 。 于 是 他 就 认识 到 世界 上 需要 这 样 一 种 
中 间 件 ， 让 Web 开发 者 所 熟悉 的 HTML、CSS、JavaScript 技术 能 够 简单 地 部 署 在 移动 设备 
上 ， 并 且 能 够 同 iPhone 实现 简单 的 功能 交互 〈 比 如 摄像 头 和 重力 感应 ) 。 

于 是 伟大 的 PhoneGap 就 诞生 了 ， 图 1-1 为 PhoneGap 的 Logo。 也 许 Object-C 实在 是 太 
遭 人 厌恶 了 吧 ， PhoneGap 一 经 发 布 ， 就 已 经 在 iOS 开发 者 中 间 流 行 起 来 ， 获 得 了 许多 奖 
项 。PhoneGap 并 没有 停止 前 进 的 脚步 ， 而 是 将 目标 瞄准 了 Android， 并 发 布 了 可 以 支持 
Android 平台 的 框架 。 这 使 得 PhoneGap 对 移动 开发 人 员 来 说 变 得 越 来 越 重要 。 





动 
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图 1-1 PhoneGap 的 Logo 


2011 年 ，Adobe 正式 宣布 收购 PhoneGap， 并 命名 为 Apache Callback。Callback 1.4 版 
后 ， 更 名 为 Apache Cordova。Cordova 横路 Android、iOS、BlackBerry、WebOS、Windows 
Phone 等 主流 平台 ， 是 目前 较 强 大 的 一 次 部 萤 全 平台 通用 的 移动 开发 框架 。 图 1-2 生动 地 摘 
述 了 Cordova 的 跨 平 台 特 性 。 





图 1-2 Cordova 的 路 平台 特性 


Apache Cordova 的 官方 网 站 是 http://cordova.apache.org/， 如 图 1-3 所 示 。 可 以 在 这 里 下 
载 软件 或 查看 文档 。 如 果 英 文 不 好 的 读者 ， 也 可 以 访问 中 文 主页 http://www.cordova.org.cn/。 
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GET STARTED DOCUMENTATION 


图 1-3 Cordova 官网 





1.1.2 ”Cordova 的 特色 
在 Cordova 中 文 主 页 上 ， 有 几 行 文字 概 插 了 Cordova 的 几 大 特色 ， 如 图 1-4 所 示 。 
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14 ”Cordova 的 特色 
下 向 笔者 将 分 条 解析 它们 的 精 扩 。 
1. 概述 
Cordova 是 一 球 让 开发 者 用 普通 Web 技术 编写 出 能 轻松 调用 API 接口 和 进入 应 用 商店 的 


HTML 5 应 用 开发 平台 ， 是 一 个 支持 全 平台 的 开源 移动 框架 。Cordova 开发 成 本 低 ， 据 估算 ， 
其 成 本 顶 多 为 原生 APP 的 1/5。 


2. 兼容 性 


Cordova 完全 做 到 了 Write Once，Run Everywhere， 也 就 是 开发 者 稼 说 的 “一 次 部 署 ， 多 
平台 运行 ”。Cordova 文 持 常见 主流 平台 的 开源 移动 框 染 。 

Cordova 目前 已 经 可 以 支持 10OS、Android、BlackBerry、Windows Phone 以 及 Web OS 这 
些 主流 操作 系统 。 


3. 标准 化 和 HTML 5+JavaScript 


笔者 认为 这 两 点 如 果 合 在 一 起 会 更 加 贴切 ， 因 为 标准 化 中 提出 的 采用 W3C 标准 其 实 就 
是 指 采用 了 标准 HTML 5 进行 开发 。Cordova 使 用 将 这 两 点 分 开 来 进行 强调 是 出 于 以 下 两 点 
目的 : 


(1) 严格 来 说 ，W3C 标准 是 一 系列 标准 的 集合 ， 包 括 但 不 限于 HTML 5、CSS 3 和 
JavaScript。 除 了 这 些 之 外 ，W3C 标准 还 包括 了 一 套 完 整 的 结构 、 表 现 、 行 为 以 及 命名 形式 
等 。 将 这 两 点 区 分 开 来 体现 出 了 Cordova 开发 团队 的 严谨 。 

(2) 从 另 一 个 角度 来 看 ， 也 可 能 是 Cordova 开发 团队 利用 了 W3C 标准 与 HTML 标准 界 
限 模糊 的 “漏洞 ”， 来 多 次 强调 同一 个 问题 以 制造 咯 头 ， 图 1-5 为 HTML 5 所 涵盖 的 范围 。 


从 图 中 不 难看 出 ，HTML 5 标准 在 广义 上 也 完全 可 以 与 W3C 标准 处 于 同一 等 级 上 ， 它 也 
包含 了 一 整套 结构 、 表 现 、 行 为 以 及 命名 形式 的 规定 。 


4. 大 众 化 移动 互联 网 开发 平台 


目前 许多 网 站 在 对 Cordova 进行 介绍 时 ， 总 会 将 主要 注意 力 放 在 上 面 提 到 的 三 点 上 ， 而 
往往 忽略 了 这 最 后 一 点 ， 但 是 笔者 认为 这 一 条 才 是 Cordova 最 为 精 艇 的 核心 价值 。 因 为 很 多 
开发 者 难以 忍受 一 遍 一 遍地 调试 才 选 择 了 Cordova， 因 此 特别 看 重 Cordova 开发 应 用 时 所 带 
来 的 高 效 和 便捷 。 

据 笔 者 估计 ， 在 实际 操作 时 甚至 不 需要 20% 的 开发 周期 就 可 以 完成 所 预期 的 目标 ， 维 护 
成 本 可 能 要 略 大 一 些 ， 但 是 也 不 会 超过 20%。 笔 者 经 常 可 以 看 到 身边 的 一 些 做 营销 的 朋友 ， 
利用 Cordova 在 很 短 的 时 间 内 就 会 开发 出 一 些 极 其 简单 的 轻 应 用 ， 然 后 上 传 到 第 三 方 平台 来 
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获取 网 店 的 收益 ， 如 果 使 用 原生 SDK 无 疑 会 让 人 疲于奔命 。 
| 





1-5 HTML 5 所 涵盖 的 范围 


由 于 使 用 HTML 5 只 适合 开发 一 些 轻 量 级 的 应 用 ， 如 新 闻 浏 览 、 视 频 播放 或 一 些 棋牌 类 
的 小 游戏 ， 所 以 如 果 有 人 想 要 开发 一 款 像 “极品 飞车 ”这 样 的 大 作 ， 使 用 Cordova 倒 也 


不 是 不 可 以 ， 毕 竟 WebGL 让 这 一 切 已 经 成 为 理论 上 的 可 能 ， 但 是 他 们 可 能 会 因为 开发 
成 本 过 高 或 学 习 成 本 过 高 而 被 放弃 。 





虽然 Cordova 开发 的 便捷 性 是 有 局 限 的 ， 因 为 它 毕 竞 是 一 炊 “ 轻 量 级 架构 ”的 快速 手机 
开发 平台 ,但 是 只 要 它 真实 有 效 地 提高 了 开发 者 的 开发 效率 ， 那 么 它 就 是 好 样 的 。 


1.1.3 Cordova 的 优势 

在 电影 《功夫 》 中 “ 火 云 邪神 ”曾经 说 过 一 句 话 ，“ 天 下 武功 唯 快 不 破 ”。 事 实 上 , 不 
但 练武 如 此 ， 做 技术 同样 如 此 ， 尤 其 是 对 于 许多 个 人 开发 者 来 说 ， 开 发 应 用 无 非 就 是 为 了 赚 
取 更 多 的 广告 流量 或 是 网 店 的 销售 量 。 对 于 目前 激烈 的 行业 竞争 ， 没 有 更 好 的 点 子 芍 怕 很 难 
在 许多 同类 型 的 应 用 中 脱 半 而 出 。 

既然 质量 上 没有 优势 ， 就 只 能 在 数量 上 做 一 些 文章 。 试 想 如 果 别 人 上 传 一 个 APP 时 ， 有 
人 能 够 上 传 100 个 APP， 这 无 疑 就 占据 了 压倒 性 的 优势 ， 可 是 这 也 需要 有 别人 100 倍 的 开发 
效率 。 花 大 价钱 雇 人 来 开发 明显 不 够 划算 ， 那 就 只 有 想 办 法 提高 自己 的 效率 了 。 

Cordova 显然 很 适合 这 种 需求 ， 它 能 够 让 开发 者 在 极 短 的 时 间 内 开发 出 功能 齐全 的 应 
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用 ， 另 外 还 有 和 它 路 平台 的 特性 ， 无 疑 又 一 次 提高 了 效率 ， 因 此 可 以 说 ，Cordova 简直 就 是 为 
个 人 开发 者 而 生 。 


展示 Cordova 同样 非常 适合 于 团队 去 操作 ， 只 不 过 优势 没 那么 明显 而 已 ， 但 是 仍然 值得 一 





试 。 


1 ,2 cordova 的 小 伙伴 们 


俗话 说 “一 个 好 汉 三 个 帮 ”， 再 好 的 框架 也 不 可 能 应 付 全 部 的 需求 ， 在 许多 时 候 ， 仪 靠 
看 Cordova 也 是 不 够 的 ， 这 时 就 需要 一 些 来 目 外 界 的 帮助 了 。 

Cordova 一 个 非常 强大 的 地 方 在 于 它 能 够 使 用 JavaScript 去 操作 API， 但 是 Cordova 的 一 
个 软肋 在 于 它 缺 少 配 套 的 UI 支持 库 ， 在 HTML 中 所 需要 的 一 切 样式 都 需要 开发 者 利用 CSS 
去 实现 。 这 样 就 造成 了 Cordova 的 三 个 缺点 : 


(1) Cordova 的 开发 者 许多 是 从 Web 转行 来 的 ， 但 是 他 们 未 必 有 移动 Web 的 开发 经 
验 ， 在 对 不 同 规格 屏幕 进行 适 配 时 往往 会 出 现 一 些 问题 ， 这 就 给 开发 者 造成 很 大 的 困扰 。 

(2) 需要 不 时 去 考虑 整个 应 用 各 个 界面 间 的 协调 性 。 

(3) 手写 CSS 相 比 当前 多 数 SDK 中 已 经 实现 了 的 以 拖 忠 方式 设计 界面 的 方法 明显 不 够 
快捷 。 


但 是 ， 这 些 对 Cordova 都 不 能 构成 实际 的 威胁 ， 因 为 毕竟 Web 发 展 了 这 么 多 年 ， 目 然 有 
太 多 “投机 取 巧 ”的 方法 可 以 借鉴 ， 有 太 多 方便 的 前 端 开发 框架 和 工具 可 以 使 用 。 其 中 比较 
有 代表 性 的 就 是 jQuery Mobile、jQuery Touch 和 jQ iPhone UI。 


1.2.1 jQuery Mobile 

这 是 最 常用 的 一 款 基 于 HTML 5 的 跨 平台 开发 框架 ， 上 手 非常 食 单 ， 而 且 官 方 给 出 的 范 
例 都 非常 详细 ， 基 本 上 每 一 个 属性 都 给 出 了 具体 使 用 的 例子 。 从 图 1-6 中 可 以 清楚 地 看 到 ， 
官方 甚至 对 每 一 个 版 本 的 功能 都 进行 了 分 类 ， 可 以 说 非常 方便 而 且 人 性 化 。 


Latest stable version 
[ y Mobile 1.40 Demos 


Legacy versions 


iQuery Mobile 1 3.2 Demos 


& Demos 








Latest code 


Work in progress demos, for testing. 





Query Mobile Demos on branch master 


1-6 jQuery Mobile 官方 对 API 的 分 类 
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图 1-7 中 是 jQuery Mobile 给 出 例子 的 方式 ， 其 中 包括 了 对 使 用 方法 的 解释 、 实 现 后 的 效 
果 和 具体 的 代码 。 


If you have multiple buttons that should sit side-by-side on the same 
style the buttons to be the width of their content so the buttons sit o 


个 View Source 





1-7 jQuery Mobile 给 出 的 例子 


jQuery Mobile 的 说 明文 档 非 常人 性 化 ， 甚 至 对 jQuery Mobile 没什么 了 解 的 人 ， 靠 着 文档 


也 能 摸索 着 做 出 自己 需要 的 效果 ， 但 前 提 是 要 有 耐心 去 读 英 文才 行 。 





在 使 用 jQuery Mobile 进行 界面 设计 时 ， 可 以 采用 一 款 名 叫 jQuery Mobile UI Builder 的 软 
件 用 拖 上 忠 的 方式 来 更 加 方便 地 生成 页 面 。 

男 外 ， 关 于 jQuery Mobile 还 有 非常 重要 的 一 点 ， 束 是 jQuery Mobile 实际 上 是 jQuery 
队 对 jQuery Mobile 在 移动 Web 上 的 一 个 补充 ， 所 以 它 比 其 他 框架 有 更 多 的 优势 。 


1.2.2 jQuery Touch 

如 果 说 jQuery Mobile 作为 jQuery 在 移动 Web 的 延伸 而 得 以 直接 使 用 Mobile 来 命名 ， 那 
么 jQuery Touch 的 命名 就 完全 得 益 于 它 强 大 的 事件 啊 应 机 制 了 。 

与 jQuery Mobile 相 比 ， 在 构建 传统 的 Web 应 用 〈 如 论坛 、 新 闻 浏 览 ) 时 ，jQuery Touch 
不 具有 任何 优势 ， 但 当 应 用 中 需要 处 理 一 些 图 标 、 手 势 时 ，jQuery Touch 的 优势 是 显而易见 
的 。 表 1-1 是 jQuery Mobile 和 jQuery Touch 的 对 比 。 


表 1-1 jQuery Mobile 和 jQuery Touch 的 对 比 
jQuery Mobile jQuery Touch 


JavaScript、Ajax 操作 的 UI 库 UI 部 件 以 及 全 面 的 事件 啊 应 函数 
全 一 致 。 可 方便 重用 已 有 的 HTML 代码 | 应 ， 高 度 依赖 于 自身 


具有 强大 的 对 象 模型 ， 学 习 周 期 较 长 ， 熟 练 掌握 
A 难度 较 大 ， 但 总 体 上 要 易于 使 用 原生 SDK 

易于 与 其 他 框架 联合 使 用 ， 扩 展 性 好 ” | 扩展 性 较 好 但 是 要 弱 于 jQuery Mobile 

跨 平台 性 好 ， 兼 容 主 流 浏览 器 仅 支 持 Webkit 内 核 浏览 器 
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1.2.3 JjQ iPhone UI 
jQ iPhone UI 提供 了 一 套 基 于 HTML 5 的 UI 库 ， 似 乎 是 为 了 更 好 地 证 明 这 一 点 ， 它 的 说 
明文 档 也 采用 了 一 种 独特 的 方式 ， 如 图 1-8 所 示 。 








Tabs 





Gallery 


Form Elements 








100 icons 


Applications 











1-8 ”jQ iPhone UI 特色 


由 于 仅仅 是 一 组 UI 支持 库 ， 所 以 在 与 jQuery Mobile 交锋 时 jQiPhone UI 几 乎 没有 任 
何 优势 。 但 这 也 不 是 绝对 的 ， 由 于 它 高 度 仿 真 了 iPhone 的 原生 UI， 因 此 开发 者 可 以 用 它 
来 达到 一 些 特 殊 的 目的 ， 比 如 说 构建 具有 iOS 风格 的 Web 应 用 或 是 在 安 草 系统 上 模拟 
iOS 的 界面 。 


小 结 


本 章 主 要 介绍 了 什么 是 Cordova， 以 及 Cordova 的 优点 。 通 过 本 章 的 学 习 ， 读 者 应 该 能 
够 认识 到 Cordova 是 否 是 目 己 所 需要 的 “工具 ”， 以 及 该 怎样 确保 这 套 “ 工 具 ” 的 高 效 性 ， 
同时 也 应 该 对 学 习 和 使 用 Cordova 需要 掌握 的 基础 知识 CHTML、CSS、JavaScript) 有 心理 
;准备 。 


上 一 章 主要 介绍 了 什么 是 Cordova， 以 及 为 什么 要 使 用 Cordova。 那 么 本 章 就 来 学 习 如 何 
动手 搭建 Cordova 的 开发 环境 。 除 此 之 外 ， 本 章 还 将 介绍 一 些 相关 的 知识 点 ， 比 如 HTML 5、 
CSS 3、jQuery 等 ， 以 及 一 些 在 Cordova 开发 中 非常 有 用 的 小 技巧 ， 并 在 最 后 开发 一 个 简单 的 
应 用 。 





本 章 的 主要 知识 点 有 : 


@ 。 安 卓 开发 环境 的 搭建 。 

i0S 开发 环境 的 搭建 。 

Cordova 的 配置 和 使 用 。 

利用 Node.js 快速 部 署 Cordova 开发 环境 。 

一 些 在 学 习 Cordova 时 必 不 可 少 的 基础 知识 ， 如 HTML 5、CSS 3、jQuery 等 。 


也。 开发 环境 的 搭建 


无 论 是 进行 哪 种 语言 的 开发 ， 最 先 要 做 的 都 是 配置 相应 的 开发 环境 ，Cordova 目 然 也 不 
例外 。 本 节 将 会 以 安 结 为 例 介 绍 Cordova 开发 环境 搭建 的 方法 ， 在 其 他 平台 上 的 搭建 方法 也 
与 此 类 似 。 


2.1.1 安 卓 开发 环境 的 搭建 

在 搭建 安 章 开发 环境 之 前 ， 首 先 要 做 的 是 安装 和 配置 JDK (Java Development Kit) ， 它 
是 SUN 公司 为 Java 开发 者 提供 的 编译 工具 ， 可 以 在 百度 搜索 JDK 之 后 到 Oracle 官网 
( http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk8-downloads-2133151-zhs.html ) 下 
载 ， 如 图 2-1 所 示 。 
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全 启 
.0 
Baid 人 ty 百度 新 闻 网 页 MB 知道 音乐 图 上 视频 地 图 文库 更 多 » 


Java SE - Downloads | Oracle Technology Network | Oracle 

Java SE downloads including: Java Development Kit (JDK), Server Java Runtime Environment 
(Server JRE), and Java Runtime Environment (JRE) 

www.oracle.com/technetwork/java/java... 2014-01-09 ~ -百度 快照 


Java SE Development Kit 8u111 
您 必须 接受 针对 Java SE 的 Oracle 二 进 制 代码 许可 协议 才能 下 载 该 软件 。 
' 接受 许可 协议 ' 不 接受 许可 协议 

产品 /文件 说 明 文件 大 小 下 载 

Linux ARM 32 硬 : 浮 点 ABI 77.78 MB jdk-8u111-linux-arm32-vip-hfttar.gz 
74.73 MB 各 jdk-8u111-linux-arm64-vip-hfttargz 

Linux x86 160.35 MB 邓 jdk-8u111-linux-i586 rpm 
Linux x86 175.04 MB jdk-8u111-linux-i586 .tar.gz 
Linux x64 158.35 MB 中 jdk-8u111-linux-x64.rpm 
Linux x64 173.04 MB jdk-8u111-linux-x64 tar.gz 
Mac OS X 227.39 MB jdk-8u111-macosx-x64.dmg 
Solaris SPARC 64 位 131.92 MB 各 jdk-8u111-Solaris-Sparcv9 tarZ 
Solaris SPARC 64 位 93.02 MB jdk-8u111-solaris-sparcv9 targz 
Solaris x64 140.38 MB jdk-8u111-solaris-x64 tarZ 
Solaris x64 96.82 MB jdk-8u111-solaris-x64 .tar.gz 
Windows x86 189.22 MB 义 jdk-8u111-windows-i586.exe 
Windows x64 194.64 MB 素 jdk-8u111-windows-x64.exe 





图 2-1 在 百度 中 搜索 JDK 或 官网 下 载 
和 DJ01 在 官网 中 最 下 面 两 个 版 本 分 别 是 Windows32 位 和 64 位 ， 下 载 前 先 选中 上 方 的 “ 接 
受 许可 协议 ”， 然 后 点 击 相应 版 本 右 侧 的 链接 ， 如 图 2-2 所 示 。 下 载 后 的 文件 名 和 
文件 大 小 如 图 2-3 所 示 。 


本 书 默 认 使 用 Windows 操作 系统 ， 可 以 根据 需要 选择 32 位 或 者 64 位。 


Java SE Development Kit 8u111 
的 Oracle 一世 pe 
”不 接受 许可 协议 


nn 下 载 
inux ARM 32 硬 浮 点 ABI 77.78 MB 义 jdk-8u111-linux-arm32-vip-hfittar.gz 
inux ARM 64 三 浮 点 ABI 74.73 MB 好 jdk-8u111-linux-arm64-vip-hflttar.gz 
160.35 MB 叉 jdk-8u111-linux-i586.rpm 
175.04 MB 素 jdk-8u111-linux-i586 targz 
158.35 MB 叉 jdk-8u111-linux-x64.rpm 
173.04 MB 叉 jdk-8u111-linux-x64 .tar.gz 
227.39 MB 叱 jdk-8u111-macosx-x64.dmg 
131.92 MB 素 jdk-8u111-solaris-sparcv9 .tar.Z 
93.02 MB 好 jdk-8u111-Solaris-Sparcvg9 tar.gz 
140.38 MB 对 jdk-8u111-solaris-x64 .tar.Z 
96.82 MB 素 jdk-8u111-solaris-x64 tar. 
189.22 MB - : 
194.64 MB 





2-2 ”选择 下 载 DK 





[到 jdk-8ull1-windows-i586.exe 2017/1/9 星期 一 . 应 用 程序 193,757 KB 


2-3 ”下载 后 JDK 
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双击 运行 安装 程序 ， 得 到 如 图 2-4 所 示 的 界面 ， 点 击 “ 下 一 步 ” 按 钮 继续 安装 。 
继续 点 击 “下 一 步 ”按钮 ，JDK 开始 安装 。 稍 等 几 分 钟 后 ，JDK 安装 完毕 ， 得 到 如 图 
2-5 所 示 的 界面 。 接 下 来 可 以 点 击 “ 后 续 步 骤 ” 按 钮 查看 JDK 配置 环境 变量 的 方法 。 





潮 Java SE Development Kit 8 Update 111 - 完成 S| 





其 | Java SE Development Kit 8 Update 111 - 安装 程序 I 


欢迎 使 用 Java SE 开发 工具 包 8 Update 111 的 安装 向 导 Java SE Development Kit 8 Update 111 已 成 功 安 装 


本 问号 将 指 写 您 完成 Java SE 开发 工具 也 8 Update 111 的 安装 过 程 。 


单 击 "后续 步骤 访问 教程 , API 文档 , 开发 人 员 指 南 , 发 布 说 明 及 更 多 内 容 , 帮助 您 
开始 使 用 JDOK。 


Java Mission Control 分 析 和 诊断 工具 套件 现在 作为 JDK 的 一 部 分 提供 。 











2-4 欢迎 界面 2-5 ”JDK 安装 完成 


实际 上 ， 随 着 新 版 本 的 不 断 出 现 ， 在 新 版 本 的 JDK 安装 完成 之 后 就 已 经 可 以 在 CMD 中 
使 用 java 命令 来 调用 。 但 是 如 果 在 CMD 中 执行 命令 javac 却 会 显示 出 提示 : javac 不 是 


内 部 或 外 部 命令 ， 也 不 是 可 运行 的 程序 或 批 处 理 文件 。 如 果 是 这 样 ， 请 继续 下 面 的 步 
了 骤 。 





CIT04 在 “计算 机 ”图 标 上 点 击 和 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ， 打 开 
如 图 2-6 所 示 的 界面 。 选 中 左 侧 的 “高 级 系统 设置 ”选项 ， 就 弹出 如 图 2-7 所 示 的 


对 话 框 。 
而 AN 
人 查看 有 关 计 算 机 的 基本 信息 
辑 设备 管理 器 Windows 版 本 
国 远程 设置 Windows 7 旗舰 版 
国 系统 保护 版 权 所 有 2009 Microsoft Corporation。 保 贸 所 有 权利 。 


» ™ 
点 击 这 里 


2-6 ”选择 “高 级 系统 设置 ” 
在 某 些 系统 中 还 要 选中 “高 级 ”选项 卡 才 能 得 到 图 2-7 所 示 的 界面 ， 进 入 之 后 点 击 
底部 的 “环境 变量 ”按钮 就 可 以 对 环境 变量 进行 设置 了 ， 如 图 2-8 所 示 。 
新 建 一 个 系统 变量 ,命名 为 JAVA HOME ， 其 中 的 内 容 为 : CNProgram 
FilesVavayjdk1.7.0 .51〈 一 定 注意 这 个 后 面 没 有 分 号 ) 。 再 新 建 环境 变量 classpath， 
内 容 为 : .;%java_home%lib。 之 后 还 要 在 环境 变量 中 找到 path 变量 ， 在 其 中 加 入 内 


容 : ;%java _ home%\bin。 
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rv | IT 高 级 示 纲 坏 扩 远程， 
要 进行 大 和 多数 更 改 ， 您 必须 作为 管理 员 登 录 。 


性 能 

视觉 效果 ， 处 理 器 计划 , 内 存 使 用 ， 以 及 虚拟 内 存 NCommonProgr amFiles%\NMicrosoft 
WUSERPROFILEN\AppData\Local\Temp 
WUSERPROFILEN\AppData\Local\Temp 


ee 


启动 和 故障 恢复 起 身 
系统 启动 、 系 统 失败 和 i 至 式 信 息 asl. lo Destination=file 
classath , ;NTAVA_HOMENNLib; NJAVA_HOMENNL. ,. 
C:\Windows\system32\cmd. exe 


[CM ]L 8 消 ]| 
司 vv 





2-7 ”点击 “环境 变量 ”按钮 2-8 在 此 处 对 环境 变量 进行 设置 
注意 : 是 在 原 有 的 内 容 之 后 加 入 而 不 是 蔡 换 ， 如 原 内 容 为 : 





那么 修改 后 的 内 容 应 为 : 











和 2 赤 在 原 内 容 的 最 后 先 加 入 一 个 分 号 ， 将 内 容 隔 开 。 


在 配置 环境 变量 时 要 注意 ， 环 境 变 量 实际 上 是 JDK 安装 的 真实 路 径 ， 比 如 说 在 本 例 中 
JDK 就 被 安装 在 了 路 径 C:\Program Files (x86)NWavaNjdkl1.8.0 111 下 ， 如 图 2-9 所 示 。 











2-9 JDK 的 安装 路 径 


人 07 配置 完成 后 ， 在 CMD 中 输入 javac - version， 显 示 所 安装 JDK 的 版 本 号 即 可 证 明 
环境 变量 配置 成 功 ， 如 图 2-10 所 示 。 
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:Msers dministrator>javac —vers1io0n 
lIavac 1.8.0 111 





2-10 ”显示 JDK 版 本 号 


人 8 在 完成 了 JDK 的 配置 之 后 就 可 以 搭建 安 草 的 开发 环境 了 。 本 来 这 是 非常 复杂 的 一 
项 任务 ,但 是 现在 安 章 官方 已 经 为 开发 者 提供 了 打包 好 的 集成 开发 环境 ， 只 要 去 官 
网 下 载 后 解压 即 可 。 在 浏览 器 中 输入 网 址 “http://developer.android.com/” 可 以 到 安 上 车 
的 开发 者 网 站 上 下 载 最 新 版 本 的 SDK ( Software Development Kit， 即 软件 开发 工具 
包 ) ， 如 图 2-11 所 示 。 


生 ， Developers Design Develop Distribute 


Design for Android KitKat 


Android KitKat brings a refreshed Ul with 
updated styles, patterns, and gestures to 
wsein your apps 

We've updated the Androw Design 
guidelines and added new pages on 
branding fullscreen, and more 





2-11 在 安 卓 开发 者 主页 获取 SDK 


E09 点 击 屏幕 下 方 的 Get the SDK 按钮 可 以 进入 如 图 2-12 所 示 的 页 面 ， 点 击 右 侧 的 
Download the SDK 按钮 ， 选 择 要 下 载 的 SDK 版 本 。 


Setting Up the ADT apps for Android. 
Bundle 


If you're a new Android developer, We recommend You 

download the ADT Bundle to quickly start developing 

apps. lt includes the essential Android SDK 

Android Studio ~ components and a version of the Eclipse IDE with 

Exploring the SDK built-in ADT (Android Developer Tools) to streamline 
your Android app development. 

Download the NDK 


Sett ng | pan 
‘isting IDE 


Existi 


With a single download, the ADT Bundle includes 


Workflow - everything you need to begin developing apps: Download the SDK 
Support Library » Eclipse + ADT plugin ee ADT Bundle for Windows 


。 Android SDK Tools 


rm 点击 虹 好 移 择 站 应 版 本 的 SDK 


se The latest Android platform 
。 The latest Android system image for the emulator 


Revisions 


ADK 





Android Studio Early Access Preview 


2-12 进入 SDK 下 载 页 面 


阳 元 安 卓 SDK 又 叫做 ADT， 是 Android Developer Tools ( 安 卓 开发 者 工具 ) 的 缩写 。 


和 D0 选中 Ihave read and agree with the above terms and conditions 复 选 框 ， 根 据 需 要 选择 
是 使 用 32 位 还 是 64 位 的 开发 环境 并 点 击 Download the SDK ADT Bundle for 
Windows 按钮 就 可 以 开始 下 载 了 。 注 意 ， 此 处 只 提供 了 Windows 环境 下 的 SDK， 
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如 果 使 用 Linux 还 需要 下 载 Eclipse 进行 配置 。 


由 于 谷歌 在 我 国 不 时 被 屏蔽 导致 读者 无 法 顺利 地 连接 到 安 卓 开发 者 网 站 获取 ADT， 因 此 
读者 可 在 百度 搜索 相关 下 载 包 。 





到 1 下 载 之 后 将 它 解压 并 复制 到 D 盘 根 目录 下 ( 也 可 以 是 其 他 位 置 ， 但 要 保证 其 中 不 
要 有 中 文 路 径 ) 。 打 开 Di\adt-bundle-windows-x86 64-20131030\eclipse 路 径 下 的 
eclipse 即 可 进入 安 车 开发 环境 ( 如 果 提 示 javaw 找 不 到 的 错误 ， 要 修改 eclipse.ini 
中 javaw 的 路 径 ， 具 体 方法 可 百度 ) 。 

90112 在 菜单 中 选择 File[New|Android Application Project， 弹 出 如 图 2-13 所 示 的 窗口 ， 按 
照 图 中 的 内 容 进行 填写 并 点 击 Next 按钮 。 

人 II3 之 后 一 直 点 击 Next 按钮 ， 最终 来 到 如 图 2-14 所 示 的 界面 ， 点 击 Finish 按钮 完成 新 














项 目的 创建 
口 
© New android Appliation IO DNewandroidAapplication ex 
New Android Application t Blank Activity 
入 The application name for most apps begins with an uppercase letter Crestes 3 new blank sctvity, with an action bar sand optional navigational elements such astabs or 
horizontal swipe- 
Application Name'& cordova-test 国 ~ 





Project Name:9 cordove-test 
Activity Namee MainActvity 





Package Name:® com.example.cordova test 
Layout Name® activity_ main 








Target spc:o|ApI 19: Android 4.4 (KitKat) - 
Compile With:a |ApI 19: Android 4.4 (KitKat) bd | 
Tr - PT 


Choose the lowest version of Android that your application will support. Lower API |evels target 
re devices, but means fewer features are available. By targeting API 8 and later, you reach 





| 
， Minimum Required sD:e | Ap 19; Android 4.4 (KitKat) ” epee Typeo [None "| 








appronmately 95% of the market, 
































2-13 ”新 建 一 个 安 早 项 目 2-14 ”完成 新 项 目的 创建 


E14 由 于 安 章 已 经 为 开发 者 准备 了 简单 的 例子 ， 因 此 当 新 建 项 目 之 后 ， 实 际 上 已 经 是 一 
个 简单 且 完 整 的 例子 了 ， 可 以 直接 编译 运行 。 但 是 为 了 运行 它 ， 还 需要 新 建 一 个 虚 
拟 机 才 行 。 在 菜单 中 选中 Window|Android Virtual Device Manager， 弹 出 如 图 2-15 
所 示 的 窗口 。 

点 击 New 按钮 ， 新 建 一 个 虚拟 机 ， 其 中 在 AVD Name 一 栏 填写 虚拟 机 的 名 称 ， 可 
以 随意 填写 ， 由 于 笔者 对 HTC 发 布 的 Nexus One 有 着 极 深 的 热爱 ， 因 此 常常 会 以 
此 来 作为 名 称 。Device 一 栏 用 来 选择 合适 的 设备 分 辨 率 以 及 屏幕 尺寸 。Target 一 栏 
用 来 选择 所 使 用 安 叶 系统 的 版 本 ， 一 般 来 说 SDK 中 会 自 带 当前 最 新 版 本 的 系统 ， 
比如 本 例 中 使 用 的 是 4.4 版 本 。 如 果 想 使 用 老 版 本 则 需要 自己 去 下 载 。 此 外 还 可 以 
在 下 方 的 其 他 选项 中 去 设置 虚拟 机 的 内 存 以 及 SD 卡 等 内 容 。 点 击 OK 按钮 完成 创 
建 ， 如 图 2-16 所 示 。 
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| DY create new Android Virtual Device (AVD) | 
AVD Name: Nexus 虚 拟 机 2 称 


Device: 4.0" WVGA (480 x 800: hdpi) 


Target: android 44 - ApELevel 19 





ndroid 
nqadrol irtua Ice Vianager 
9 be CPU/ABI: ARM (armeabi-v7a 











Android Virtual Devices | Device Definitions Keyboard: Hardware leeyboard present 











局 
i 8 . 二 a Skin: | Display a skin with hardware controls 
List of existing Android Virtual Devices located at Ci\Users\Administrator\.android\avd 
N 


Front Camera: one 
AVD Name Target Name Platform API Level CPU/ABI 

No AVD available Es a 一 Back Camerz: 
Edit... 


Memory Opbons: VM Heap: 32 


Delete... 


Repair... 
Internal Storage; MiB "| 
Detalls,,， 


SD Card; 


Start... 


扩 击 此 处 新 建 一 个 虚拟 机 


Emulabon Options:; 加 Snapshot 回 Use Host GPU 


Override the existing AVD with the same name 








Refresh 





ww A valid Android Virtual Device. LY A repairable Android Virtual Device. 
XK An Android Virtual Device that failed to load. Click 'Details' to see the error， 














图 2-15 新 建 一 个 虚拟 机 图 2-16 设置 新 建 虚拟 机 的 各 项 属性 


和 B06 接 下 来 就 可 以 选中 刚刚 新 建 好 的 安 章 项 目 并 在 其 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 
Run AS|Android Application 进行 测试 ， 结 果 如 图 2-17 所 示 。 


必 寺 在 第 一 次 打开 虚拟 机 时 ， 由 于 系统 需要 进行 安装 和 加 载 ， 因 此 等 待 的 时 间 会 比较 长 ， 请 
各 位 读者 耐心 一 些 。 另 外 在 第 一 次 测试 时 为 了 能 够 减少 等 待 时 间 ， 建 议 读 者 可 以 将 虚拟 


机 的 屏幕 分 辨 率 尽 量 降 低 一 点 。 





至 此 ， 安 转 的 开发 环境 就 配置 成 功 了 ， 本 和 章 的 后 续 内 容 将 逐步 介绍 一 些 它 的 使 用 技巧 和 
方法 ， 请 读者 注意 实践 。 


ES 
而 | phonegap_test 





Hello world! 





2-17 第 一 个 安 卓 程序 
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iOS 开发 环境 的 配置 则 要 容易 很 多 ， 当 然 了 ， 如 果 想 要 开发 iOS 程序 ， 最 好 有 一 台 


Iaco。 


ED 


下 载 后 安装 并 运行 如 图 2-19 所 示 。 


“xcode” 的 搜索 结 


Xcode 
软件 开发 工具 
真 真 六 78 份 评分 


EE 


es A 





2-18 ”iOS 开发 工具 


开 图 2-20 所 示 的 界面 。 


Choose a template for your new project: 
watchOS tvOS macOs 


Application 
Single View 
Application 


Ea 
Game 


2 


iMessage 
Application 


Cocoa Touch 
Static Library 


口 口 
口 口 


Sticker Pack 
Application 


Framework & Library 


3 
Cocoa Touch 
Framework 


Welcome to Xcode 


Version 8 


RY Get started with a playground 
Explore new ideas quickly and easily. 


Create a new Xcode project 
Create an app for iPhone, iPad, M [ 


Check out an existing project 
Start working on something from an SCM repository. 





2-19 


Cross-platform 


a 
$00 


Page-Based 
Application 


Master-Detail 
Application 


Metal Library 


打开 mac 的 App Store， 找 到 一 款 软 件 Xcode， 如 图 2-18 所 示 。 


HelloCordova 


.fhtml/cordovalcordovaApp11-2/platiorms/ios 


HelloCordova 
.esktop/test/cordovaWechatpp/platforms/ios 


委 a 
外 | — 
ey 


向 HelloCordova 
2 .phtmllcordovajcordovaApp16jplatformsjios 


Apple TV. 


Open another pfoject,- 


Xcode 运行 后 的 界面 


如 果 是 要 创建 一 个 全 新 的 项 目 ， 就 选择 第 二 行 Create a new Xcode project， 然 后 打 


3 


Tabbed 
Application 





Cancel 


2.20 





新 建 Xcode 项 目 
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和 04 如 果 是 要 开发 一 般 的 手机 App， 选 择 Single view Application， 然 后 点 击 Next 按钮 


后 如 图 2-21 所 示 。 


Choose options for your new project: 


Product Name: HelloWord 
Team: Spinenpiitini 
Organization Name: ‘WHF 
Organization Identifier: com.wanghongrfei 
Bundle Identifier: com.wanghongfei.HelloWord 
Language: Objective-C 
Devices: iPhone 


w Use Core Data 
Include Unit Tests 
Include UI Tests 





Cancel 


2-21 ”填写 APP 信息 


给 项 目 起 一 个 名 字 ， 然 后 点 击 Next 按钮 ， 选 择 一 个 路 径 后 ， 第 一 个 程序 就 算是 创 


建 完成 了 ， 新 建 APP 的 工程 界面 如 图 2-22 所 示 。 


- ) Phone 7 Plus Running HelloWord on one 7 Plus 
3 Helloword 


到 色 HelloWord $ ineral Capabilities Resource Tags Info 
TU HelloWord 
h AppDelegate.h vw ldentity 
m AppDelegate.m 
h ViewController.h Display Name 
ee Bundle ldanitifier comwanghongfei.HelloWord 
Main.storyboard 
Bl Assets.xcassets Version 1.0 
LaunchScreen,storyboard Build 1 
a Info.plist 
| heloword xcdatamodeld 
> Supporting Files 


> Products w Automatically manage signing 
Xcode will create and update profiles, app IDs, and 
ceriificates. 


~ 


Team 艺人 红 盔 区 (Personal Team) 2 
Provisioning Profile Xcode Managed Profile () 
Signing Cortificate iPhone Developor: 300hu@®@163.com (UW29UP24., 


vv Deployment Info 


Deployment Target 


Devices iPhone 


Main Interface Main 
nn < HelloWord 


图 2-22 新 建 项 目 界面 


点 击 左 上 角 的 三 角 按钮 ， 就 可 以 调用 模拟 器 运行 程序 了 ， 只 不 过 这 个 程序 什么 都 没有 添加 ， 
能 看 到 的 只 有 一 个 白色 背景 。 因 为 本 书 并 不 是 要 讲解 iOS 编程 ， 所 以 就 不 做 过 多 地 介绍 了 。 

另外 ， 因 为 要 在 mac 上 面 书写 JavaScript 和 HTML 的 代码 ， 建 议 读 者 再 去 下 载 一 个 其 他 
的 编程 工具 ， 只 要 能 编写 JavaScript 和 HTML 的 代码 即 可 ， 个 人 比较 推荐 HBuilder， 如 图 


2-23 所 示 。 下 载 地 址 : http://www.dcloud.io/index.html。 
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《> 


《> 《? 


Previous Next 


Build Settings Identity and Type 


Namc HelicwWord 
Location Absolute 
HelloWord.xcodepro]j 
Full Path /Users/wanghongtei2016/ 
Desktop/used/ 凑 习 | 
HelloWord/ 
HelloWord.xcodeproj 
Project Document 
Projsct Format Xcode 3.2-compatible 
Organization WHF 
Class Prefix 


Text Settings 


© 


~ 
w 





No Matches 





第 2 章 Cordova 入 门 


”HBuilder 





2-23 HBuilder 


2.1.3 ”Cordova 的 配置 

为 了 提高 运行 速度 和 降低 开发 者 的 工作 量 ，Cordova 在 3.0.0 版 本 之 后 采用 了 全 新 的 架 
构 ， 利 用 Node.js 目 动 生成 项 目 。 目 前 最 新 的 Cordova 版 本 是 6.3.0。 

Cordova 使 用 Node.js 进行 管理 。 首 先 要 去 Node.js 的 官方 网 站 (http://nodejs.org/) 下 载 
最 新 版 本 的 Node.js 并 进行 安装 (这 个 安装 有 msi 安装 版 ， 比 较 简 单 ， 所 以 本 书 省 略 安装 步 
又 ) 。 安 装 完 成 后 以 管理 员 喘 份 运行 Node.js command prompt.exe。 


许多 人 在 这 一 步 容易 错误 地 运行 了 Nodejsexe 进行 操作 ， 因 为 它 的 图 标 比较 容易 成 为 用 





户 的 目标 ， 但 这 却 是 错误 的 。 


运行 Node.js command prompt.exe 之 后 ， 在 命令 行 中 输入 命令 : npm install -g cordova， 
Node.js 将 会 日 动 在 网 络 上 寻找 Cordova 相关 组 件 进 行 安 装 。 稍 等 几 分 钟 即 可 下 载 完毕 ， 可 以 
进行 下 一 步 的 操作 。 在 命令 行 下 执行 命令 cordova create myCordova， 创 建 一 个 名 为 
myCordovap 的 项 目 ， 完 成 后 出 现 如 图 2-24 所 示 的 提示 。 此 时 在 用 户 目录 下 已 经 出 现 了 一 个 
名 为 myCordovap 的 文件 夹 ， 如 图 2-25 所 示 。 双 击 打开 该 文件 来 ， 如 图 2-26 所 示 。 


C:\NJsers\Administrator>cordova create myCordova 
May Cordova anonymously report usage statistics to improve the tool] over time? 
You have been opted out of telemetry. To change this, run: cordova telemetry on - 


Using detached cordova—create 


Creating a new cordova project. 





2-24 ”用 命令 行 创建 一 个 新 项 目 
A et 


SSO- 4 至 统 [C;)) 月 户 Administrator } 
文件 [日 ” 氟 号 |E) 理 震 (W 工 踊 [T) ”如 助 (H) 
后 过 了 二 打开 包含 到 库 宁 了 













WD hooks 
platforms 
| bb plugins 


WWW 





5 wt 0 
和 向 和 申 咎 和 








有 | config.xml 


2-25 ”新 创建 的 项 目 可 以 在 用 户 目录 中 找到 2-26 新 创建 的 项 目 结构 
在 命令 行 中 继续 输入 命令 : cd myCordova， 进 入 项 目 文件 ， 然 后 使 用 cordova platform 
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add android 命令 ， 为 当前 项 目 添 加 Android 平台 。 如 果 是 iOS 平台 ， 将 android 替换 为 ios 
即 可 。 站 光 添 加 不 成 功 ， 记 得 用 cordova platform remove android 先 删 除 之 前 添加 的 
Android 平台 。 第 一 次 添加 平台 会 比较 慢 ， 如 图 2-27 所 示 。 


E 管理 员 : Nodejs command prompt - cordova platform add android 


CGC: Nsers dninistrator\myCordova>cordova platform add android 
Adding android project... 
Creating Cordova project for the findroid platform: 

Path: platforms\android 

Package: io.cordova.hellocordova 

Name: HelloCGCordova 

Activity: Mainfctivity 

Android target: android—24 
ubproject Path: CordovaLib 
Android project created with cordova-androidB6 .日 .日 
Installing "cordova—plugin—whitelist"” for android 
ANDROID HOME=D:\adt \sdk 
AUA_HOME=C: \Program Files 《x86>\\vJava\jdki .8.0 111 
Ssubproject Path: CordovaLib 
Picked up _JAUVA_OPTIONS: 一 XmxocT12H 
Starting a new Gradle Daemon for this build Csubsequent builds will be fastery>. 
Download https://icenter.bintray.com/com/android/tools/hbuild/gradle/2.2.8/gradle 
-2.2.8.pom 
Download https://repoil.maven .org/naven2/com/android/tools/build/gradle—core/2.2. 
BB/gradle—core—2.2.08.pom 
Download https://repoli.maven .org/maven2/com/android/tools/build/builder/2 .2 -日 “bu 
ilder—2.2.8.pom 
Download https://repolil .maven .org/maven2/com/android/tools/lint/lint/25.2.8/1int— 
25 -2- 日 .pom 
Download httpbs:-Aepol .mavuven .org/maven2/com/android/tools/hbuild/transform-api/2. 
SA US Tb ee 
Download https://repoli .maven .org/maven2/com/android/tools/build/gradle—api/2.2.8 
AgqPFadle 一 apzi-2 -2- 日 .pom 
Download https://repoil.maven .org/mnaven2/com/android/databinding/compilerCommon/2 
-2.8/compilerCommon—2.2.8.pom 
I A A £2 
Download https://repoi .maven .org/maven2/0rg/ow2/asm/asm-—parent/5 .808.4/asm—-parent— 
5 . 问 .4.pom 
I A A LS pA We -pom 





图 2-27 添加 安 卓 平台 (第 一 次 会 比较 慢 ) 


添加 平台 后 ， 发 现在 myCordova\platforms 下 多 了 一 个 android 文件 夹 ， 此 时 束 可 以 将 整 
个 文件 夹 导入 到 Eclipse 中 进行 使 用 了 。 导 入 后 包含 两 个 项 目 ， 一 个 是 CordovaLib， 一 个 是 
MainActivity。MainActivity 为 测试 项 目 ，CordovaLib 为 Cordova 的 源 代 码 。 

还 可 以 使 用 cordova platform list 来 得 看 当前 项 目 ， 添 加 一 个 平台 ， 如 果 想 都 编译 这 些 平 

使 用 cordova build 生成 可 运行 的 app 文件 ， 如 a 平台 下 的 apk 文件 。 如 果 只 想 生 
成 某 个 平台 侣 ， 可 以 用 cordova build android (iOS 开发 要 运行 cordova build ios) 来 指定 平台 进 
行 生成 ， 如 图 2-28 所 示 。 


MUJsersNnhdministhatokrnmoyceokhdoua>zcoPdoua build android 
NDROID_HOME=D: \adt \sdk 

AUA_HOME=GC: \Program Files x86‘\vJava\jdki1 .8.8 111 

ubproject Path: CordovalLib 

Down loading http://services .gradle .org/distributions/gradle—2.14.1—all.zip 





图 2-28 利用 Cordova 生成 完整 的 安 卓 apk 文件 (第 一 次 会 比较 慢 ) 


Cordova 是 命令 行 界 面 〈 人 简称 CLI) ， 所 以 一 般 把 它 的 操作 称 为 Cordova CLI， 具 体 CLI 
都 有 哪些 命令 ， 可 参考 官方 文档 : http://cordova.apache.org/docs/en/latest/guide/cli/index.html。 
或 者 也 可 以 通过 cordova help 命令 来 查看 。 


还 可 以 在 网 站 https://build.phonegap.com/ 上 利用 Cordova\PhoneGap 提供 的 在 线 编译 工具 
直接 生成 各 个 平台 都 能 使 用 的 安 效 文件， 这样 就 彻底 抛 开 了 SDK， 真 正 做 到 了 器 平台 


发 ， 非 常 方便 。 
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A i 2 


人 后 跨 平 台 的 HTML 5 


Cordova 是 一 套 基于 HTML 5 的 跨 平台 开发 框架 ， 要 学 习 使 用 Cordova， 首 先 要 熟练 学 握 
Cordova 的 API， 归 根 到 底 还 是 要 对 HTML 5 使 用 熟练 。 目 前 ， 开 发 者 对 HTML 5 的 认识 还 
存在 着 不 小 的 误区 。 因 此 掌握 好 HTML 5 的 基本 知识 是 非常 重要 的 。 

HTML 5 是 用 来 取代 在 1999 年 被 指定 并 沿用 至 今 的 HTML 4 和 XHTML 标准 的 。 虽然 它 
目前 仍 处 于 不 断 完善 阶段 ， 但 却 已 经 不 断 地 渗透 到 了 人 们 的 日 常 网 络 生活 当中 ， 大 多 数 的 浏 
昂 右 目前 都 能 够 文 持 HTML 5。 

相对 于 过 去 的 HTML 标准 ，HTML 5 主要 有 以 下 两 大 改进 : 一 是 强化 了 网 页 的 表现 效 
果 ， 包 括 了 Canvas 动画 (如 图 2-29 所 示 ) 、 对 三 维 效果 和 CSS 3 的 支持 ， 以 及 对 摄像 头等 
设备 的 文 持 等 ， 二 是 退 加 了 本 地 数据 库 等 Web 应 用 的 功能 。 





2-29 利用 Canvas 动画 制作 的 HTML 5 游戏 


功能 的 强大 使 HTML 5 已 经 不 再 是 单纯 的 通用 标记 语言 了 ， 现 在 提 到 HTML 5 时 往往 指 
的 是 包含 了 HTML 5、CSS 3、jQuery 甚至 是 设计 模式 在 内 的 一 系列 技术 组 合 。 它 能 够 有 效 地 
减少 浏览 融 对 插件 (如 Adobe Flash 等 ) 的 依赖 ， 并 可 提供 更 加 强大 的 服务 。 图 1-5 为 HTML 
5 所 包含 的 技术 范围 。 


二 3 习 减少 对 括 件 的 依赖 就 代表 着 有 更 多 的 应 用 可 以 仅 依靠 浏览 器 而 独立 运行 ， 不 必 担 心平 台 
的 限制 。 这 就 导致 了 HTML 5 强大 的 跨 平台 特性 ， 使 得 同一 款 应 用 可 以 在 不 同 的 设备 上 


都 能 够 运行 。 这 也 是 为 什么 目前 主要 的 跨 平台 开发 框架 大 多 是 基于 HTML 5 的 原因 。 除 
此 之 外 ， 也 不 难 解释 当年 iOS 敢于 “不 支持 Flash 的 原因 了 。 





广义 来 说 ， 只 要 在 HTML 文件 的 头 部 加 入 一 句 声明 “<!DOCTYPE html>” 就 证 明 该 页 面 是 
文 持 HTML 5 标准 的 了 。 这 也 就 导致 了 目前 许多 没有 良心 的 商人 利用 文学 上 的 歧义 ， 来 宣称 
自己 的 产品 是 基于 HTML 5 的 ， 以 此 骗取 高 额 的 收益 。 

笔者 在 这 里 希望 本 书 的 读者 都 能 够 具备 明辨是非 的 能 力 ， 不 要 被 这 种 黑心 的 商人 所 蒙 
骗 ， 那 么 HTML 5 究竟 包含 了 哪些 新 的 技术 呢 ? 下 面 将 一 一 列举 出 来 。 


(1) 语义 特性 : HTML 5 包含 了 更 加 丰富 的 标签 ， 包 括 <header>、<menu> 等 ， 能 够 使 网 
页 的 结构 具有 更 好 的 可 读 性 ， 便 于 搜索 引擎 的 理解 和 收录 。 这 些 标签 也 使 得 页 面具 有 了 更 好 
的 “模块 化 ”特性 ， 便 于 后 期 的 维护 和 修改 。 
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(2) 本 地 存储 特性 : 为 HTML 5 提供 了 本 地 缓存 功能 ， 使 其 能 够 存储 一 些 本 地 数据 让 
基于 HTML 5 的 APP 能 更 快 地 启动 和 加 载 。 

(3) 设备 兼容 特性 : 由 于 HTML 5 致力 于 减少 对 外 部 插件 的 依赖 ， 并 提供 了 前 所 未 有 
的 数据 接 入 接口 ， 这 使 得 HTML5 具有 了 比 前 一 代 HTML 更 加 强大 的 设备 兼容 性 。 

(4) 连接 特性 : 加 强 了 对 Ajax 的 支持 ， 这 使 得 HTML 5 能 够 提供 更 好 的 网 页 实时 聊 
天 、 在 线 网 页 游戏 等 服务 。 其 中 两 个 重要 的 特性 分 别 是 Sever-Sent-Event 和 WebSocks， 这 两 
个 特性 能 够 更 加 有 效 地 将 来 日 服 务 器 端的 数据 实时 推送 至 客户 。 

(5) 三 维 以 及 图 形 特 效 特性 : 支持 基于 SVG、Canvas、WebGL 以 及 CSS 3 的 动画 功 
能 ， 使 HTML 5 具有 了 更 强大 的 图 形 处 理 能 力 ， 理 论 上 已 经 能 够 文 持 一 些 大 型 3D 游戏 。 

(6) 网 页 多 媒体 特性 : 包括 <video>、<audio> 标 签 ， 以 及 对 摄像 头等 外 设 的 支持 ， 使 
HTML 5 具有 了 强大 的 多 媒体 处 理 能 

(7) 性 能 优化 : 使 浏览 器 能 够 更 加 快速 地 实现 对 页 和 面 的 泻 染 ， 保 证 用 户 不 需要 长 时 间 等 
待 页 面 的 加 载 。 


改元 HTML 5 非常 强大 ， 但 并 不 代表 它 很 安全 ， 反 而 由 于 它 的 诸多 新 特性 给 开发 者 和 维护 管 


理 人 员 带 来 了 更 多 的 挑战 。 使 用 HTML 5 编写 的 应 用 甚至 会 比 传统 应 用 更 容易 泄露 用 户 
的 敏感 数据 。 欧 洲 网 络 信息 安全 机 构 (ENSIA) 已 经 敬告 说 HTML 5 不 够 安全 。 





2 更 好 玩 的 CSS 3 


CSS 是 层 闭 样式 表 (Cascading Style Sheet) 的 缩写 ， 在 网 页 中 使 用 HTML 可 以 对 页 面 元 
素 的 颜色 、 字 体 、 背 景 和 其 他 效果 进行 有 效 且 精确 地 控制 。 
CSS 3 是 在 HTML 5 标准 中 根据 需要 针对 过 去 CSS 进行 的 修改 和 补充 ， 主 要 包括 以 下 内 


= 
ES 


碟 
D 


盒子 模型 的 样式 : 主要 包括 了 圆 角 、 阴 影 、 透 明 以 及 背景 渐变 等 新 的 效果 。 
选择 器 : 为 CSS 3 提供 了 比 旧 版 本 的 CSS 更 加 灵活 的 选择 器 模型 。 
文字 特效 : 使 CSS 3 支持 颜色 渐变 、 阴 影 文 字 多 列 显示 等 效果 。 
2D/3D 转换 : 为 CSS 动画 商定 基础 ， 使 页 面 元 素 支 持 更 广泛 的 几何 变换 。 
动画 : 为 CSS 加 入 了 新 的 动画 特性 ， 使 HTML 5 代替 Flash 成 为 可 能 。 
通过 使 用 CSS 3 能 够 完成 许多 在 原 有 CSS 框架 下 看 似 不 可 能 的 任务 ， 比 如 说 可 以 用 6 个 
div 元 素 与 CSS 3 混用 来 实现 正方 体 的 效果 。 
首先 在 HTML 中 建立 6 个 元 素 ， 为 了 使 它们 便于 定位 ， 要 使 用 两 层 div 对 它们 进行 嵌 
套 。 分 别 用 1~6 的 阿拉 伯 数 字 来 标注 正方 体 的 6 个 面 : 


<section class="container"> 
<div id="cube"> 


<figure class="front">1</figure> 


a 
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接 下 来 利用 CSS 定义 各 个 层次 的 关系 、 尺 寸 ， 为 进行 3D 变换 做 准备 。 





接 下 来 要 为 正方 体 的 6 个 面 做 3D 变换 ， 由 于 每 个 面 的 面积 大 小 都 是 完全 一 样 的 ， 不 同 
的 只 是 所 处 的 坐标 和 角度 ， 因 此 在 此 部 分 只 需要 利用 translation 属性 进行 变换 ， 比 如 说 font 
需要 旋转 180"， 然 后 向 页 面 内 部 平移 100px: 
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最 后 为 正方 体 加 入 动画 效果 使 正方 体 不 断 滚动 : 





最 终 实现 的 效果 如 图 2-30 所 示 。 


@ 人 6 


2-30 “利用 CSS 3 所 实现 的 正方 体 效果 


总 结 : CSS 3 能 够 完成 一 些 在 旧版 本 CSS 中 无 法 完成 的 任务 ， 它 在 未 来 的 开发 中 会 起 到 
举足轻重 的 作用 。 





| 在 实际 开发 中 ， 可 以 利用 本 例 来 实现 游戏 中 摇 骨 子 的 效果 ， 以 增强 用 户 的 娱乐 性 。 另 外 
在 日 常 的 应 用 中 ， 动 画 也 是 增强 交互 必 不 可 少 的 要 素 ， 比 如 360 手机 助手 中 就 为 “加 速 ” 
功能 加 入 了 一 个 火箭 升 空 的 动画 。 虽 然 这 些 动 画 效 果 用 JavaScript 也 可 以 实现 ， 但 是 效 


率 远 不 如 CSS 3。 另 外 ， 网 页 游戏 界 也 有 一 条 规则 是 :“ 能 用 CSS 3 动画 就 别 用 
JavaScript*。 由 此 不 难看 出 CSS 3 的 重要 。 





2 .A 完美 兼容 浏览 器 的 jQuery 框架 


jQuery 是 一 个 优秀 的 轻 量 级 JavaScript 框架 ， 能 够 完美 兼容 HTML 5、CSS 3 以 及 各 种 浏 
览 圳 ， 并 使 开发 者 能 方便 地 处 理 HTML 事件 、 动 画 ， 也 能 为 网 站 提供 方便 的 Ajax 交互 。 

相对 于 其 他 JavaScript 框架 ，jQuery 一 个 非常 大 的 优势 在 于 它 拥有 非常 全 面 的 帮助 文档 
和 例 程 ， 并 且 拥 有 许多 成 熟 的 插件 可 供 选 用 ， 比 如 jQuery Mobile 就 是 一 套 非 常 不 错 的 移动 插 
件 。 此 外 ，jQuery 不 但 能 够 有 效 地 使 jQuery 代码 与 HTML 内 容 分 离 ， 也 可 以 与 原本 的 
JavaScript 混用 ， 这 对 开发 者 来 说 无 疑 是 非常 方便 的 。 

比如 ， 要 使 用 传统 的 JavaScript 啊 应 页 面 上 某 元 素 被 点 击 的 事件 ， 需 要 构建 如 下 代码 : 





而 如 果 在 jQuery 中 ， 则 只 需要 编写 如 下 代码 : 
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虽然 代码 看 似 变 长 了 ， 也 更 复杂 了 ， 但 这 却 完美 地 实现 了 HTML 与 JavaScript 代码 的 分 
离 ， 因 此 在 实际 开发 中 是 非常 方便 的 。 当 然 ， 在 一 些 简单 的 小 项 目 中 ， 有 些 开 发 者 并 不 习惯 
jQuery 这 种 语法 ， 那 么 还 可 以 选择 这 样 : 


另外 ， 本 书 介 绍 的 是 使 用 HTML 5 进行 手机 应 用 的 开发 ， 许 多 插件 都 是 基于 jQuery 的 ， 
这 也 是 许多 开发 者 不 得 不 对 jQuery 有 所 了 解 的 一 个 重要 原因 ， 图 2-31 是 jQuery Mobile 的 一 
个 界面 。 











2-31 ”jQuery Mobile 制作 的 界面 


2.5 小 结 


目前 ， 几 乎 所 有 开发 者 都 热衷 于 开发 独立 的 移动 应 用 ， 因 为 这 会 为 他 们 带 来 巨大 的 收 
益 。 但 是 在 不 久 的 将 来 ， 这 些 一 定 会 被 HTML 5 甚至 是 Cordova 终结 。 因 为 无 论 是 Cordova 
还 是 HTML 5， 都 在 致力 于 完成 同一 个 目的 : 将 更 加 强大 的 功能 进行 封装 使 之 实现 跨 平台 的 
特性 。Cordova 在 本 质 上 就 是 编 详 一 个 更 加 强大 的 跨 平台 浏览 上 融 ， 而 这 有 可 能 会 将 当前 的 软 
件 开 发 行业 带 入 一 个 新 的 时 代 。 
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本 章 将 在 正式 学 习 Cordova 之 前 先 做 一 些 必要 的 准备 工作 ， 以 便 更 好 地 体验 Cordova 所 
带 来 的 便利 性 和 高 效 性 。 此 外 ， 本 章 还 将 对 HTML 5 的 概念 和 一 些 功 能 进行 更 加 深入 地 学 
习 ， 以 便 使 读者 能 够 更 好 地 适应 未 来 发 展 的 趋势 。 本 章 的 最 后 将 对 Cordova 中 的 各 种 API 做 
一 个 简单 的 总 结 。 








本 章 的 主要 知识 点 有 : 


与 HTML 5 相关 的 一 些 知 识 。 

使 用 Cordova 配合 jQuery Mobile 快速 开发 简单 应 用 的 方法 。 

开发 Cordova 应 用 时 ， 为 了 保证 应 用 的 适应 性 而 要 注意 的 一 些 细节 。 
Cordova 中 各 类 API 的 应 用 场合 。 


林 . 1 HTML 5 ， 你 真 的 准备 好 了 吗 


其 实 Cordova 的 开发 归根 到 底 还 是 HTML 5 的 开发 ， 作 为 一 种 正在 不 断 成 长 中 的 新 技 
术 ，HTML 5 的 发 展 无 疑 为 开发 者 提供 了 很 好 的 机 会 。 在 进行 学 习 之 前 笔者 整理 了 在 HTML 
5 向 试 时 最 第 被 问 到 的 10 道 面 试题 以 及 答案 ， 读 者 可 以 以 此 来 测试 自己 是 否 真 的 准备 好 了 。 


1. HTML 5 中 新 的 DocType 和 Charset 作用 是 什么 


与 HTML 4 相 比 ，HTML 5 已 经 不 再 是 SGML 〈 标 准 通用 标注 语言 ) 的 子 集 ， 因 此 可 以 
用 简化 的 方式 对 文档 进行 声明 。 有 具体 方法 如 下 : 





2. 如 何在 HTML 5 页 面 中 嵌入 音频 


HTML 5 包含 了 嵌入 音频 的 标准 方式 ， 文 持 的 格式 包括 MP3、Ogg 和 Wav。 具 体 使 用 方 
式 的 例子 如 下 : 
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在 W3C 上 有 关于 各 种 浏览 加 对 不 同音 频 文件 格式 莱 容 性 的 说 明 ， 但 是 那个 说 明 还 是 在 


一 ”Firefox 4.0 时 代 发 布 的 ; 而 目前 Firefox 已 经 发 布 了 50.0 版 本 ， 有 许多 支持 特性 已 经 大 大 
增强 ， 因 此 在 使 用 这 些 功 能 时 建议 还 是 实际 试 一 试 。 





3. 如 何在 HTML 5 页 面 中 嵌入 视频 


和 音频 一 样 ，HTML 5 定义 了 杉 入 视频 的 标准 方法 ， 文 持 的 格式 包括 : MP4、WebM 和 
Ogg， 使 用 方法 的 例子 如 下 : 





4. 除了 音频 和 视频 ，HTML 5 还 支持 哪些 新 的 媒体 元 素 


除了 video 和 audio 之 外 ，HTML 5 中 还 支持 embed《〈 作 为 外 部 应 用 的 容器 ) 、track 〈 定 
义 对 媒体 的 文本 跟踪 ) 和 source( 用 于 增强 对 多 种 媒体 源 的 支持 ) 三 种 媒体 元 素 。 
此 外 ， 被 广大 HTML 5 爱好 者 喜闻乐见 的 Canvas 元 素 也 可 以 认为 是 媒体 元 素 的 一 种 。 


5. HTML 5 中 的 Canvas 元 素 应 该 怎样 使 用 


Canvas 元 素 是 在 HTML 5 中 利用 脚本 (主要 是 JavaScript) 来 实现 在 页 面 中 进行 绘图 操 
作 的 元 素 。 

这 个 元 素 充 其 量 只 是 图 像 的 一 个 容器 ， 起 到 画布 的 作用 ， 而 一 切 操作 (绘图 或 者 动画 ) 
都 是 通过 额外 的 脚本 来 完成 的 。 


6. HTML 5 有 哪些 不 同类 型 的 存储 


与 以 往 Web 应 用 通过 Cookie 实现 存储 功能 不 同 ，HTML 5 中 新 加 入 了 本 地 存储 功能 ， 可 
以 实现 快速 而 又 安全 的 本 地 数据 存储 服务 。 
HTML 5 提供 了 两 种 不 同 的 对 象 可 用 来 存储 数据 : 


@ localStorage: 适用 于 长 期 存储 数据 ， 浏 览 器 关闭 后 数据 不 丢失 。 
@ sessionStorage: 存储 的 数据 在 浏览 器 关闭 后 自动 删除 。 
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7. HTML 5 引入 了 什么 新 的 表单 属性 
HTML 5 中 引入 了 大 量 新 的 表单 属性 ， 如 表 3-1 所 示 。 
表 3-1 HTML 5 中 引入 的 表单 属性 
属性 名 称 说 明 


ai | 与 nput 标 给 联合 使 用 ,用 于 声明 input 标 欠 由 的 各 人 半 项 
op | TEXT 
ate | 用 规定 input 标 欠 由 输 和 的 关 型 23 个 期。 


用 于 规定 input 标签 中 输入 的 类 型 ， 为 一 个 数字 
用 于 规定 input 标签 中 输入 的 美 型 


用 于 规定 input 标签 中 输入 的 类 型 


EE 
moe | 用 机 定 input 标签 中 输 XMm 
J 
A 


8. 与 HTML 4 相 比 ,HTML 5 废弃 了 哪些 元 素 


出 于 各 种 原因 ， 一 些 旧 的 元 素 在 HTML 5 中 将 不 再 被 使 用 。 比 如 说 元 素 basefont、big、 
center、font、strike 和 tt 由 于 能 够 被 CSS 很 好 地 代 蔡 而 不 再 使 用 ， 而 一 些 其 他 元 素 如 frame、 
frameset 和 noframes 则 因为 可 能 会 破坏 页 面 的 可 用 性 和 可 访问 性 而 被 废弃 ， 而 元 系 
acronym、applet、isindex 和 dir 则 是 被 HTML 5 中 的 新 元 素 取 代 。 

另外 ， 还 有 一 大 批 属性 也 一 同 在 HTML 5 中 被 废除 。 





由于 开发 者 已 经 熟悉 了 那些 " 老 的 "元 素 以 及 属性 ， 因 此 在 现实 中 HTML 5 与 HTML 4 混 
用 的 情况 经 常 发 生 。 这 会 给 未 来 的 维护 工作 带 来 不 少 的 麻烦 ， 因 此 作为 开发 者 一 定 要 努 






力 去 避免 这 种 情况 发 生 。 


9. HTML 5 标准 提供 了 哪些 新 的 API 


HTML 5 提供 了 多 种 新 的 API 以 文 持 它 的 诸多 新 特性 ， 如 Media《〈 媒 体 ) 、Text Track 
(文本 跟踪 ) 、Application Cache (应 用 缓存 ) 、User Interface (用 户 接 口 ) 、History (历史 
记录 ) 等 。 
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10. HTML 5 应 用 缓存 和 常规 浏览 器 缓存 有 何 差别 


HTML 5 的 应 用 缓存 最 关键 的 就 是 文 持 离线 应 用 ， 可 获取 少数 或 者 全 部 网 站 内 容 ， 包 括 
HTML、CSS、 图 像 和 JavaScript 脚本 并 存在 本 地 。 该 特性 加 速 了 网 站 的 性 能 ， 与 传统 的 浏览 
占 缓 存 比较 ， 该 特性 并 不 强制 要 求 用 户 访问 网 站 。 

一 般 来 说 ， 在 上 述 10 个 问题 中 ， 能 够 答对 7 个 以 上 就 可 以 算是 对 HTML5 有 了 一 定 的 了 
解 ， 而 答对 9 个 以 上 的 读者 恭喜 你 ! 你 已 经 在 未 来 的 HTML 5 热潮 中 占据 了 先 机 。 


3.2 HTML 5 的 若干 练习 


上 一 节 提 出 了 10 个 关于 HTML 5 的 问题 ， 如 果 你 能 够 答对 7 个 以 上 ， 那 你 可 以 直接 跳 
过 本 节 了 。 但 是 如 果 你 没有 答对 6 个 问题 ， 还 请 你 耐心 地 在 本 节 中 接受 几 个 实战 锻炼 ， 跟 着 
笔者 用 HTML 5 来 实现 几 个 简单 的 界面 。 


3.2.1 实现 渐变 的 背景 和 圆 角 的 按钮 

在 Cordova 中 ， 一 切 的 界面 都 是 利用 HTML 5 来 实现 的 ， 其 中 背景 颜色 和 按钮 是 非常 重 
要 的 两 个 元 素 ， 那 么 在 本 小 节 中 将 开始 实现 一 组 利用 HTML 5 制作 的 按钮 样式 。 

【范例 3-1】 利 用 HTML 5 实现 渐变 的 背景 和 圆 角 的 按钮 。 
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运行 之 后 的 界面 如 图 3-1 所 示 。 





3-1 利用 HTML 5 实现 渐变 的 背景 和 圆 角 的 按钮 
读者 可 以 对 比 范 例 中 的 代码 和 图 3-1， 现 在 对 该 范例 的 几 个 知识 点 分 别 进行 讲解 。 


(1) 在 屏幕 的 最 顶部 ， 可 以 清楚 地 看 到 一 张 老虎 的 照片 ， 一 般 在 应 用 的 项 部 向 弟 会 采用 
类 似 的 方式 来 展示 一 些 图 片 或 新 闻 。 通 常 的 做 法 是 使 用 一 个 宽度 与 屏幕 相同 而 高 度 固 定 的 div 
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标签 在 屏幕 上 占据 一 定 的 位 置 ， 然 后 使 用 img 标签 具体 指定 显示 图 片 的 内 容 。 





(2) 仔细 观察 图 3-1 的 话 能 够 看 到 页 面 的 背景 是 有 一 定 渐变 的 ， 这 也 是 CSS 3 中 的 一 个 
新 特性 ， 可 以 通过 设置 linear-gradient 的 值 来 产生 背景 颜色 渐变 的 效果 ， 如 范例 第 12 行 所 
示 。 


”由 于 手机 上 大 多 使 用 webkit 内 核 的 浏览 器 ， 因 此 读者 如 果 选 择 在 PC 上 对 本 范例 进行 测 
” 试 也 许 会 与 预期 有 些 区别 ， 这 时 就 可 以 将 范例 中 的 -webkit-linear-gradient 修改 为 -moz- 
linear-gradient 和 -ms-linear-gradient。 





(3) 除了 渐变 背景 之 外 ， 圆 角 也 是 在 CSS 3 中 最 常 被 用 到 的 一 个 属性 ， 可 以 通过 属性 
border-radius 来 设置 圆 角 的 半径 ， 如 范例 中 第 27 行 和 第 28 行 所 示 。 

(4) 还 有 相当 重要 的 一 点 就 是 当 为 移动 设备 设计 界面 时 ， 由 于 各 种 屏幕 矿 寸 雷 异 较 大 ， 
可 能 无 法 一 一 适 配 最 完美 的 显示 方案 ， 因 此 在 设计 时 要 尽量 让 每 个 元 素 都 单独 占据 一 排 的 位 
置 ( 如 图 3-1 中 的 4 个 按钮 ) 或 者 是 两 个 、 三 个 元 素平 分 一 排 ， 这 样 能 够 让 界面 具有 更 强 的 
“ 抗 变 形 ”能 力 。 


3.2.2 ”利用 JavaScript 响应 用 户 的 操作 

以 上 利用 HTML 5 和 CSS 3 实现 了 一 个 简单 的 界面 ， 但 是 如 果 想 要 对 它 进行 操作 还 要 搭 
配 上 JavaScript 才 行 。 

【范例 3-2 】 利 用 JavaScript 响应 用 户 的 操作 。 
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运行 之 后 界面 与 图 3-1 相同 ， 但 是 当 用 户 点 击 “ 按 钮 一 ”时 顶部 的 图 像 就 会 改变 ， 而 用 
户 点 击 其 他 几 个 按钮 时 则 会 显示 相应 的 对 话 框 ， 如 图 3-2 和 图 3-3 所 示 。 





3-2 点击“ 按钮 一 ”后 顶部 的 图 片 变化 3-3 点击“ 按钮 二 ”后 弹出 对 话 框 
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这 是 由 于 在 范例 的 第 9~23 行 声 明了 4 个 JavaScript 函数 ， 而 在 下 面 的 第 30、33、36 和 
39 行 中 使 用 div 标签 的 onClick 方法 ， 对 它们 分 别 进 行 了 调用 。 


1 二 ”在 灾 际 开发 中 对 JavaScript 只 需要 了 解 到 如 何 使 用 它 来 阐 出 对 话 框 或 者 显示 内 容 到 页 
上 就 足够 一 般 应 用 的 开发 了 。 当 然 随 着 层次 的 深入 还 会 涉及 执行 效率 等 问题 ， 不 过 这 不 






是 本 书 应 当 讨论 的 内 容 。 


3.2.3 利用 CSS 3 生成 动画 
在 前 面 的 内 容 中 已 经 通过 HTML 5 和 CSS 3 制作 了 一 个 简单 的 界面 ， 并 且 使 用 JavaScript 
实现 了 对 用 户 操 作 的 啊 应 。 不 过 相对 当前 网 上 各 种 炫目 的 特效 而 言 ， 这 种 例子 似乎 是 有 点 令 
读者 感觉 到 无 聊 。 那 好 ， 在 本 节 中 将 利用 HTML 5 来 实现 一 些 高 级 一 点 的 功能 。 
“ 写 轮 眼 ”是 漫画 《火影 忍者 》 中 的 一 种 技能 ， 许 多 应 用 开发 者 会 把 它 当 作 应 用 的 开场 
动画 来 使 用 ， 本 小 节 就 以 此 为 例 使 用 CSS 3 的 动画 功能 实现 “ 写 轮 眼 ”的 效果 。 
【范例 3-3 】 利 用 CSS 3 生成 动画 。 
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运行 之 后 的 结果 如 图 3-4 所 示 。 也 许 单纯 使 用 图 片 无 法 展示 出 笔者 真实 看 到 的 画面 ， 但 
是 当 运 行 代 码 之 后 可 以 清楚 地 看 到 “ 写 轮 眼 ” 确 实在 旋转 。 


| 容 眼 





3-4 旋转 的 写 轮 眼 


这 种 效果 是 依靠 CSS 的 动画 属性 实现 的 ， 在 范例 的 第 37 行 和 第 38 行 是 对 屏幕 上 旋转 部 
分 所 使 用 动 男 的 定义 ， 而 这 个 动画 的 具体 效果 则 是 需要 开发 者 根据 需要 进行 设计 的 ， 如 缉 例 
第 42~67 行 所 示 。 


上 在 使 用 一 此 CSS 3 中 的 局 性 时 ， 有 时 会 需要 加 入 一 些 特定 的 前 级 ， 比 如 -WebKiE、 -OZ 
人 等， 而 在 介绍 时 为 了 方便 一 般 都 不 会 特别 进行 说 明 ， 比 如 范例 第 37 行 和 第 38 行 的 
animation 属性 和 -webkit- 属 性 其 实 是 同样 的 作用 ， 遇 到 类 似 的 情况 请 读者 根据 范例 进行 简 





单 理解 即 可 。 


通过 范例 中 对 动画 进行 定义 部 分 的 阅读 可 以 发 现 ，CSS 3 对 动画 的 定义 实际 上 就 是 在 由 
from 和 to 所 包含 的 区 间 中 ， 利 用 CSS 的 样式 来 声明 元 素 在 动画 的 开始 和 结束 时 所 处 的 状 
态 ， 然 后 由 浏览 器 实现 其 间 过 程 的 变化 。 

还 可 以 通过 对 元 素 的 animation-iteration-count 属性 进行 设置 来 控制 动画 播放 的 次 数 ， 由 
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于 本 范例 中 希望 * 写 轮 眼 ”能 够 一 直 旋 转 ， 因 此 就 将 它 的 值 设置 为 infinite。 


3.2.4 利用 JavaScript 让 “流氓 兔 ” 跑 步 

以 上 利用 CSS 3 实现 了 漫画 《火影 忍者 》 中 “ 写 轮 眼 ” 的 效果 ， 本 小 节 依 旧 要 实现 一 段 
动画 ， 不 过 显示 的 内 容 就 要 可 爱 多 了 。 

【范例 3-4】 利 用 JavaScript 让 流氓 免 跑步 。 
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运行 后 的 画面 如 图 3-5 所 示 ， 虽 然 无 法 利用 图 片 来 描述 ， 但 是 可 以 保证 的 是 ， 确 实 能 够 
看 到 流 谍 免 在 屏 蒂 上 跑 起 来 了 。 


利用 Javascript 让 流氓 免 跑 步 





图 3-5 流氓 免 跑步 的 画面 
利用 JavaScript 显示 动画 时 ， 会 用 到 计数 需 图 数 setInterval， 它 可 以 按照 一 定 的 周期 重复 
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执行 一 系列 的 操作 。 比 如 本 范例 中 就 会 以 150ms 为 周期 反复 执行 自 定 义 函 数 show()〔( 如 范例 
第 33 行 所 示 ) 。 

范例 第 34~49 行 是 对 show 尔 数 的 定义 ， 可 以 看 出 该 函数 利用 了 变量 step 除 以 4 所 得 的 
余数 来 表示 流 谍 免 跑步 的 动作 ， 从 而 更 换 页 面 上 应 当 显示 的 图 片 ， 给 用 户 一 种 流 谍 免 在 跑步 
的 效果 。 

经 证 实 ， 使 用 JavaScript 实现 的 动画 执行 效率 要 远 低 于 使 用 CSS 3 的 动画 属性 来 显示 动 
画 ， 因 此 在 开发 游戏 时 要 尽量 使 用 CSS 3 而 不 是 JavaScript， 但 是 在 本 书 中 将 会 提 到 的 一 个 
“像素 鸟 ”的 例子 仍然 采用 了 JavaScript 的 方法 ， 这 是 出 于 方便 理解 的 目的 ， 还 请 读者 能 够 
体谅 。 


关于 界面 设计 


本 章 范 例 3-1 中 展示 了 一 种 使 用 CSS 3 和 HTML 5 实现 的 界面 ， 但 是 这 个 界面 实际 上 有 
一 点 问题 ， 那 就 是 当 屏 磋 过 党 时 可 能 会 变形 ， 如 图 3-6 所 示 。 





3-6 顶部 的 图 片 由 于 拉 伸 而 严重 变形 


也 许 在 图 中 由 于 使 用 了 老虎 而 无 法 看 出 特别 巨大 的 反 兰 ， 那 么 假如 项 部 的 图 片 换 成 了 我 
们 敏 爱 的 "超人 板 叔 ”， 这 时 落差 就 非常 明显 了 《如 图 3-7 所 示 ) 。 





3-7 正常 尺寸 和 被 拉 伸 变形 后 的 超人 对 比 
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对 于 这 样 的 情况 ， 目 前 确实 找 不 到 一 种 公认 的 “最 好 ”方法 来 解决 ， 但 是 却 有 几 套 备 选 
方案 : 


@ 利用 JavaScript 获取 屏幕 的 尺寸 并 准备 多 套 CSS 样式 文件 ， 然 后 根据 屏幕 的 尺寸 来 
决定 使 用 哪 套 CSS 样式 。 

@ 选择 图 片 时 尽量 不 使 用 有 人 物 或 者 是 电线 杆 等 景物 的 图 片 ， 这 样 即 使 变形 了 也 很 难 

@ 直接 利用 JavaScript 来 保证 图 片 的 高 度 与 宽度 保持 一 定 的 比例 。 





除 此 之 外 还 要 考虑 到 顶部 栏 和 尾部 栏 的 样式 ， 顶 部 栏 和 尾部 栏 都 是 应 用 中 经 常会 用 到 的 
元 素 ， 许 多 开发 者 都 担心 ， 如 果 手 机 的 像素 密度 越 来 越 高 ， 固 定 尺寸 的 项 部 栏 和 尾部 栏 会 不 
会 由 于 像素 密度 的 原因 小 到 让 用 户 看 不 清楚 呢 ? 

对 于 这 个 问题 笔者 也 不 好 回答 ， 因 为 这 种 情况 在 未 来 倒 也 不 是 不 可 能 发 生 ， 但 是 就 目前 
来 看 所 谓 最 前 沿 的 4K 屏 医 已 经 有 些 性 能 过 剩 了 ， 因 此 几 年 内 开发 者 们 还 没有 必要 为 此 而 纪 
结 。 

将 顶部 栏 和 尾部 栏 的 高 度 设置 为 40px 是 公认 为 比较 合适 的 尺寸 ， 为 了 保证 显示 的 效果 可 
以 使 用 position 将 它们 固定 在 屏幕 的 项 部 和 底部 。 

【范例 3-5】 页面 的 顶部 栏 和 尾部 栏 。 
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运行 之 后 可 以 利用 鼠标 的 深 轮 配合 Ctrl 键 来 调整 浏览 右 的 放大 和 缩小 ， 如 图 3-8 和 图 3-9 
所 示 ， 可 见 在 大 多 数 情况 下 ，40px 的 高 度 已 经 足够 用 户 看 清 屏幕 了 。 


页 面 的 山 部 栏 和 尽 部 拦 


页 面 的 项 部 栏 和 尾部 栏 rp 
此 处 显示 内 容 








图 3-8 页 面 的 顶部 栏 和 尾部 栏 图 3-9 页 面 的 顶部 栏 和 尾部 栏 


通过 范例 中 的 CSS 样式 可 以 看 出 ， 顶 部 栏 和 尾部 栏 利用 了 将 定位 方式 设置 为 fixed 的 方 
式 ， 来 保证 最 终 这 两 个 元 素 是 相对 于 屏幕 对 齐 的 。 在 实际 应 用 中 还 可 以 为 这 两 个 元 素 加 入 z- 
index 属性 ， 来 保证 它们 不 会 被 其 他 元 素 遮 挡 。 

其 次 就 是 真正 显示 内 容 的 content 部 分 ， 由 于 它们 的 一 部 分 内 容 是 被 项 部 栏 和 尾部 栏 履 毅 
住 的 ， 因 此 如 果 在 这 些 地 方 显 示 内 容 ， 结 果 就 会 有 一 部 分 内 容 无 法 显示 ， 如 图 3-10 所 示 ， 此 
时 需要 为 它 加 入 外 边 距 ， 如 范例 第 37 行 所 示 。 


页 面 的 项 部 栏 和 尾部 栏 





3-10 顶部 栏 的 上 边 距 被 取消 后 一 部 分 内 容 会 被 顶部 栏 遗 盖 住 


至 于 其 他 的 内 容 读 者 可 以 自己 对 比 范例 来 学 习 ， 另 外 在 实际 使 用 时 可 能 会 有 开发 者 喜欢 
为 顶部 栏 加 入 一 些 阴 影 的 特效 ， 但 是 由 于 笔者 艺术 水 平 不 高 ， 和 试 过 后 还 是 决定 放弃 了 。 


3 e 6, 使 用 jQuery Mobile 进行 界面 制作 


上 一 节 的 内 容 介 绍 了 在 利用 HTML 5 实现 应 用 界面 时 要 注意 的 两 个 问题 ， 其 实 相 比 界 面 
变形 ， 也 许 大 多 数 开发 者 会 更 加 烦恼 另 一 个 问题 : 如 何 设计 界面 。 

与 行业 外 到 处 歌 吹 的 “创新 ”不 同 ， 真 正 从 事 互 联网 行业 的 开发 者 应 该 会 明白 ， 大 多 数 
开发 者 其 实 更 加 信奉 拿 来 主义 ， 一 些 网 上 的 开源 框架 很 多 可 拿 来 作为 自己 应 用 的 界面 。 在 这 
些 框 架 中 jQuery Mobile 是 大 多 数 开 发 者 最 热爱 的 一 个 。 

下 面 将 介绍 使 用 jQuery Mobile 进行 界面 制作 的 方法 ， 首 先 可 以 去 jQuery Mobile 的 官方 网 站 

(如 图 3-11 所 示 ， 网 址 为 : http:Wjiquerymobile.com/) 下 载 需 要 的 jQuery Mobile 压缩 包 。 
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全 /QUerY ModernWe er 


mobile AUGUST 6& 7, 2014 
CONFERENCE REBISTER NOW 


Demes Doewnload APlDocumentation Themes 


4 Web Framework Download jQuery Mobile 


jQuery Mobile is a HTMLS-based user interface System 
designed to make responsive web sites and apps that are 


accessible on all smartphone, tablet and desktop devices 


点 击 此 处 进行 下 载 


Seriously cross-platform with HTMLS Pe 
Source Code (GitHub) 
jQuery Mobie framework takes the "vmte jes5 go more" mantra to 
the next level: hstead of wriing unique applications for each mobie 
device or OS the usery moble framework allows you to design a a wu :六 JavaScnpt 


jQuery NMobile Git (WIP Buid) 


singe highly-branded responsive web site or application 由 或 will work 
on all popylar Smartphone. tathet and desxiop plaltforms 


Gragded Browser Supporl 





3-11 jQuery Mobile 官方 网 站 


DI01 点 击 右 侧 的 Latest stable 按钮 即 可 下 载 最 新 版 本 的 jQuery Mobile， 当 然 也 可 以 选择 
下 载 比 较 旧 一 点 的 版 本 。 


新 版 本 的 jQuery Mobile 在 UI 上 模仿 了 iOS 7 的 局 平 化 风格 ， 并 且 加 入 了 许多 新 的 内 
容 ， 但 是 由 于 国内 所 能 找到 的 资料 有 限 ， 并 且 一 些 新 功能 比较 复杂 ， 可 以 选择 传统 版 本 


先 来 学 习 怎样 使 用 jQuery Mobile; 但 是 在 本 节 中 由 于 只 是 为 了 体验 ， 因 此 还 是 要 选择 最 
新 版 本 。 





和 02 解压 下 载 好 的 文件 ， 发 现 里 面 有 好 多 文件 ， 不 过 只 需 使 用 在 图 3-12 中 标 出 的 几 个 
文件 就 可 以 了 (其 中 jQuery.js 需要 读者 自己 去 jQuery 官网 下 载 ) 。 






2014/7/22 14:59 









:| 19 2014/7/1 9:37 Kf B 
非 | jquery.mobile.external-png-1.4.3 2014/7/1 9:37 层 又 样式 表 文 栏 120 KB 
甘 | jquery.mobile.external-png-1.4.3.min 2014/7/1 9:37 层 琶 栏 式 表 文 栏 89 KB 
车 | jquery.mobile.icons-1.4.3 2014/7/1 9:37 三 营 样式 表 义 档 127 KB 
甘 | jquery.mobile,icons-1,4.3.min 2014/7/1 9:37 三 登 梯 式 表 文档 125 KB 
闫 | jquery.mobile,inline-png-1.4,3 2014/7/1 9:37 层 亚 样式 专文 栏 146 KB 用 框 出 
在 | jquery.mobile.inline-png-1.4.3.min 2014/7/1 9:37 层 到 样式 专 立 档 5 KB 
莽 | jquery,mobile,inline-svg-1,.4,3 2014/7/1 9:37 层 琶 样式 志文 档 222 KB 的 是 要 使 
非 | jquery.mobile.inline-svg-1.4.3.min 2014/7/1 9:37 层 琶 样式 表 文 191 KB 用 的 文件 
甘 | jquery.mobile.structure-1.4.3 2014/7/1 9:37 层 到 样式 表 文 89 KB 
非 | jquery.mobile.structure-1.4.3,min 2014/7/1 9:37 营 栏 式 表 文档 67 KB 
甘 | jquery.mobile.theme-1.4.3 2014/7/1 9:37 簿 样式 专文 20 KB 
甘 | jquery.mobile.theme-1.4.3.min 2014/7/1 9:37 3 了 12 KB 
车 | j i 2014/7/1 9:37 3 34 KB 
; 4 14/7/1 9:37 - 1 KB 
在 | jquery.mobile-1.4.3.min 2014/7/1 9:37 三 又 样 式 过 文 栏 203 KB 
EE jquery.mobile-1.4.3.min 2014/7/1 9:37 JS 文 仁 194 KB 
jquery.mobile-1.4.3.min 2014/7/1 9:37 Linker Address .… 229 KB 


3-12 使 用 jQuery Mobile 时 需要 使 用 的 几 个 文件 
和 03 处 后 就 可 以 使 用 jQuery Mobile 进行 开发 了 ， 如 范例 3-6 所 示 。 


【范例 3-6】 使 用 jQuery Mobile 实现 的 界面 。 
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运行 之 后 的 界面 如 图 3-13 所 示 。 


村 村 


第 3 章 ”开始 前 的 准备 


jQuery Mobile 


按钮 一 





3-13 ”利用 jQuery Mobile 实现 的 界面 
不 知道 各 位 读者 有 没有 感受 到 jQuery Mobile 的 巨大 优势 ， 仅 仅 使 用 了 35 行 代 码 就 已 经 
实现 了 要 手写 几 百 行 代码 才能 够 实现 的 样式 ， 最 重要 的 是 任 谷 一 般 人 的 美术 功 抵 根本 做 不 出 
这 样 精美 的 界面 来 。 而 且 jQuery Mobile 还 有 一 些 隐 含 的 “福利 ”， 比 如 说 用 户 点 击 按 钮 时 ， 
按钮 还 会 这 有 光 雷 的 特效 ， 并 且 在 不 同 页 面 切 换 时 也 会 珊 有 的 认 的 动画 效果 。 


这 里 将 不 再 对 jQuery Mobile 进行 单独 讲解 了 ， 因 为 要 单独 对 jQuery Mobile 进行 介绍 的 


话 至 少 需要 再 写 一 整 本 厚 厚 的 书 才 行 ， 有 兴趣 的 读者 可 以 购买 《构建 路 平台 APP: 
jQuery Mobile 移动 应 用 实战 》 进行 学 习 。 





编辑 器 的 选择 


本 书 首先 推荐 使 用 Notepad++ 作 为 编辑 器 ， 因 为 在 Notepad++ 中 能 够 通过 Ctrl 键 和 鼠标 
滚轮 方便 地 切换 字体 的 大 小 ， 这 种 做 法 会 让 开发 者 觉得 非 芝 舒服。 但 是 有 些 时 候 Notepad++ 
却 不 是 那么 “合格 ”， 比 如 说 当 一 个 页 面 中 同时 有 CSS、HTML 和 JavaScript 存在 时 ， 
Notepad 并 不 能 将 它们 全 部 识别 并 且 高 有 党 显示 ， 而 只 能 高 完 标 注 其 中 的 一 种 代码 ， 这 让 笔者 
非常 不 适应 (如 图 3-14 所 示 ) 。 
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中 <head> 

F<script> 

function open news(i) { 
document .getElementBylId{("news") .style.display='none'} 
document .getElementByld("l1list") .style.display="ii 


} 

Hfunction back list() { 

document .getElementById("list") .style.display="? 
document .getElementById("news") .style.display="'i 


} 

</acript> 

<style> 

* { margin:0;) 

#head 

{ 
width:100%; 
height:é60px; 
background:#567; 
font-size: 32px; 
color:#fff:; 
line-height:60px; 








text-align:center; 


3-14 ”页 面 中 出 现 两 种 以 上 的 脚本 时 Notepad++ 的 高 亮 支 持 


这 里 再 推荐 Dreamweaver 作为 各 位 读者 的 编辑 器 。 也 许 读 者 正 是 通过 它 学 会 了 制作 网 
页 ， 因 此 能 够 欣然 接受 这 一 建议 ， 但 是 相信 也 有 不 少 读者 认为 国内 开发 者 利用 Dreamweaver 
作为 编辑 器 是 一 件 非常 “ 土 敬 ”的 事情 《论坛 上 经 帝 为 此 事 争 论 不 休 ) 。 

类 似 的 传闻 笔者 也 听 过 不 少 ， 不 过 说 起 来 不 管 是 Dreamweaver 还 是 Cordova 甚至 是 
jQuery Mobile， 它 们 都 有 共同 的 一 个 “老板 ”一 一 Adobe。 因 此 ， 本 书 推荐 使 用 Dreamweaver 
就 合情合理 了 。 另 外 ， 在 Dreamweaver CS 6 中 也 提供 了 对 jQuery Mobile 和 Cordova 的 文 持 

(如 图 3-15 所 示 ) 。 


打开 最 近 的 项 目 主要 功能 
加 打开 -. HIML C36 新 拱 功 能 概述 


ColdF Usion 


ee MEE 
css [加 | 固有 ae sinass Catalyst 创作 


Javascript | Css i 对 果 而 
ma 和 


马 流体 耻 格 布 后 

5 Dieameavef 站 上 应. 
牛 Business Cakalyst 站 点 .… 
回 更 多 .… 


目 局 如 入 门 » 

上 品 新 女 中 能 ， Dw 
目 资源 ， ok 
| 吗 Dreamweaver Exchanse » 


| ， 涉 月 旺 示 





3-15 Dreamweaver CS6 为 Cordova 和 jQuery Mobile 提供 的 支持 


Cordova 中 的 API 能 干什么 


本 草 主 要 介绍 进行 Cordova 开发 前 所 需要 做 好 的 准备 ， 那 么 现在 是 不 是 该 介绍 一 些 关 于 
Cordova 的 事 了 呢 ? 其 实 Cordova 就 是 将 HTML 写成 的 页 面 显示 出 来 ， 然 后 通过 特定 的 
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JavaScript 获取 几 组 数据 而 已 。 

虽然 说 使 用 Cordova 进行 开发 主要 是 依靠 HTML 各 方面 的 知识 ， 但 对 于 一 名 Cordova 开 
发 者 来 说 ， 最 主要 的 还 是 Cordova 各 种 API 的 用 法 。Cordova 为 开发 者 提供 了 电池 状态 、 相 
机 、 联 系 人 、 文 件 系统 、 音 频 等 API 接口 ， 本 节 将 一 一 介绍 它们 的 功能 和 用 途 。 

1. Accelerometer ( 加 速度 传感器 ) 


Accelerometer 也 就 是 人 们 所 称 的 重力 感应 ， 可 以 用 它 来 获取 手机 各 个 方 回 的 加 速度 。 比 
如 ， 可 以 利用 重力 加 速度 约 等 于 10 的 特点 来 获取 当前 手机 的 方 回 ， 可 以 在 一 些 游戏 中 利用 它 
和 一 些 算法 实现 体感 操作 (如 模拟 用 户 对 方 辐 盘 的 操作 〉。 

2. Camera ( 摄像 头 ) 

Camera 正如 它 的 字面 意思 ， 可 以 通过 它 来 获取 摄像 头 末 集 到 的 信息 ， 不 过 一 般 来 说 用 处 
不 大 。 

3. Capture ( 采集 工具 ) 

Capture 类 似 于 录音 机 或 录像 机 ， 可 以 用 它 录 制 音频 、 视 频 或 者 抓 取 图 像 上 传 到 网 络 ， 也 
可 以 通过 它 获取 来 自 网 络 的 多 媒体 信息 。Capture 多 用 在 一 些 社交 类 应 用 中 ， 如 “人 人 网 ”的 
上 传 图 片 功能 可 以 依靠 它 来 简单 实现 。 

4. Compass ( 指南 针 ) 

如 果 说 加 速度 传感器 是 用 来 感应 重力 从 而 知道 地 面 方 癌 的 话 ， 那 么 指南 针 则 可 以 获取 东 
西南 北 的 方向 ， 可 以 通过 它 和 加 速度 传感器 、 地 理 位 置 传感器 配合 实现 一 些 很 神奇 的 功能 ， 
如 从 用 户 当 前 正 拍摄 的 照片 中 得 知 用 户 所 在 的 方位 。 

这 听 上 去 非常 难以 实现 ,但 是 却 并 不 是 无 法 实现 的 ， 如 从 地 理 位 置 传 感 占 上 获取 的 信息 
表示 用 户 正在 海边 ;指南针 又 能 够 证 明 用 户 正 面 绷 大 海 ; 那么 其 至 不 需要 对 照片 进行 分 析 吏 
可 以 判断 出 用 户 所 拍摄 照片 的 内 容 了 。 

5. Connection ( 网 络 连接 ) 


Connection 判断 用 户 所 处 的 网 络 状态 。 

6. Contacts ( 联系 人 ) 

Contacts 对 设备 上 的 联系 人 进行 增 、 删 、 改 、 查 ， 是 非常 实用 的 一 组 API。 
7. Device ( 获取 设备 信息 ) 

Device 可 以 获取 设备 的 版 本 号 、 操 作 系统 等 信息 。 


8. Events ( 系统 事件 ) 


Events 是 一 些 对 系统 时 间 进 行 啊 应 的 回调 函数 ， 比 如 在 有 用户 电量 过 低 时 发 出 通知 ， 也 可 
以 对 音量 键 或 搜索 键 等 功能 进行 啊 应 。 
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9. File ( 文件 管理 系统 ) 

可 以 通过 File 来 管理 手机 上 的 文件 ， 但 是 由 于 Cordova 的 执行 效率 问题 ， 不 建议 读者 稳 
试用 它 来 开发 一 款 文 件 管理 器 ， 甚 至 是 徐 单 的 电子 书 阅读 器 。 在 应 用 中 使 用 File 来 对 文件 进 
行 一 些 人 简单 的 操作 (比如 在 txt 中 保存 一 些 留言 或 笔记 ) 还 是 可 以 的 。 

10. Geolocation ( 地 理 位 置 传感器 ) 

Geolocation 是 通常 所 说 的 GPS， 社 交 软 件 中 比较 常用 的 一 项 功能 ， 通 常会 配合 其 他 传 感 
货 使 用 。 

11. Media ( 媒体 ) 

Media 用 于 对 音频 文件 进行 录制 和 播放 ， 感 觉 不 如 采集 工具 实用 ， 因 此 也 比较 鸡肋 。 

12. Notification ( 提醒 ) 

Notification 可 以 调用 设备 的 震动 和 蜂 鸣 需 等 功能 ， 一 般 用 来 实现 对 用 户 操作 的 反 饿 ， 比 
如 在 游戏 中 当 用 户 撞车 后 会 有 一 连 串 的 震动 等 。 

13. Storage ( 本 地 存储 ) 

Storage 是 非常 实用 的 一 组 API， 可 以 在 本 地 使 用 简单 的 数据 库 功 能 ， 在 实际 开发 中 还 可 
以 缓存 一 些 新 闻 或 聊天 记录 等 信息 。 

14. Globalization ( 全 球 化 ) 


许多 应 用 的 用 户 是 使 用 不 同 语言 的 人 ， 如 果 应 用 受 欢迎 ， 不 久 就 需要 在 多 语言 环境 下 使 
用 。Globalization API 使 全 球 化 更 方便 ， 它 允许 应 用 得 询 操作 系统 的 当前 设置 。 开 发 者 通过 这 
个 API 判断 用 户 使 用 的 语言 ， 然 后 使 用 适当 的 语言 加 载 内 容 ， 还 使 用 API 中 的 方法 更 好 地 显 
示 日 期 、 时 间 、 数 字 和 货币 单位 。 

15. InAppBrowser ( 内 置 浏览 器 ) 

InAppBrowser 的 版 本 和 Cordova API 的 版 本 更 接近 ， 人 允许 在 单独 的 窗口 中 加 载 网 页 。 


16. Splashscreen ( 闪 屏 ) 
Cordova 提供 了 Splashscreen API 能 够 用 来 在 Cordova 应 用 启动 时 显示 自 定义 的 办 屏 。 


3.7 小 结 


本 章 主 要 对 HTML 的 一 些 应 用 方式 进行 了 学 习 ， 并 且 预 习 了 Cordova 中 各 个 API 的 作 
用 ， 这 样 在 今后 的 学 习 中 读者 才能 够 做 到 心中 有 数 。 当 然 ， 由 于 篇 幅 问 题 ， 本 划 所 涉及 的 知 
识 点 都 无 法 进行 深入 地 讲解 ， 读 者 会 随 者 本 书后 面 各 章 案 例 的 增加 来 细 化 这 些 知识 。 下 一 章 
将 开始 学 习 Cordova 中 的 各 种 API。 
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第 4 章 
<Cordovad 的 本 地 事件 > 


本 章 将 引入 手机 应 用 中 一 个 非常 重要 的 概念 一 一 生命 周期 。 可 以 说 只 有 真正 了 解 了 
Cordova 的 生命 周期 ， 才 算是 开始 入 门 了 。 除 了 生命 周期 之 外 ， 本 章 还 要 教会 读者 一 些 在 进行 
Cordova 开发 时 的 必 备 技能 ， 比 如 输出 信息 的 三 种 方法 等 。 





本 章 的 主要 知识 点 有 : 

@ 什么 是 软件 的 生命 周期 以 及 生命 周期 的 存在 意义 。 

@ 什么 是 本 地 事件 以 及 怎样 用 本 地 事件 来 使 应 用 具有 更 强 的 交互 性 。 
@ Cordova 的 生命 周期 与 Activity 的 生命 周期 有 什么 区 别 和 共性 。 

@ Cordova 生命 周期 中 15 种 本 地 事件 的 概念 和 应 用 。 

@ 在 Cordova 开发 中 获取 调试 信息 的 三 种 方法 。 


什么 是 生命 周期 


想 要 真正 地 理解 Cordova 应 用 开发 的 内 涵 ， 首 先 需 要 理解 什么 是 生命 周期 。 这 在 字面 上 
其 实 非 第 容易 理解 ， 一 个 应 用 从 开始 运行 一 被 手机 加 载 王 应 用 被 退出 之 间 的 过 程 就 称 之 为 一 
个 生命 周期 。 为 了 使 读者 更 容易 理解 ， 本 节 将 以 Android 原生 SDK 中 Activity 类 的 生命 周期 
结合 Eclipse 中 的 LogCat 调试 工具 进行 实战 讲解 。 


4.1.1 Activity 的 生命 周期 

先 仔细 地 观察 图 4-1 的 内 容 ， 这 是 谷歌 官方 给 出 的 Activity 生命 周期 流程 图 ， 它 包括 了 
一 个 安 音 应 用 从 被 创建 到 结束 时 所 经 历 的 各 种 事件 。 下 面 是 Activity 生命 周期 中 所 经 历 的 各 
个 过 程 。 

(1) 局 动 Activity: 系统 将 调用 onCreate 方法 创建 新 的 Activity 对 象 ， 然 后 依次 调用 
onStart 方法 和 onResume 方法 使 刚刚 创建 的 Activity 进入 运行 状态 。 

(2) 暂停 状态 : 当前 的 Activity 被 其 他 的 Activity 履 羡 或 手机 锁 屏 ， 原 Activity 被 放 入 
后 台 ， 系 统 将 调用 onPause 方法 使 Activity 进入 暂停 状态 。 

(3) 恢复 状态 : 当 处 于 暂停 状态 的 Activity 重新 被 运行 时 ， 系 统 将 调用 onResume 方法 
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使 之 重新 加 到 运行 状态 。 

(4) 后 台 状 态 : 当 用 户 点 击 Home 键 返回 主屏 ，Activity 被 保存 在 后 台 ， 系 统 将 先 调用 
onPause 方法 再 调用 onStop 方法 使 Activity 处 于 暂停 状态 。 

(5) 返回 状态 : 当 用 户 重 新 打开 Activity 时 ， 系 统 会 先 调用 onRestar 方法 再 调用 onStar 
方法 ， 最 后 调用 onResume 方法 使 应 用 返回 到 运行 状态 。 

(6) 当前 Activity 处 于 被 履 新 状态 或 者 后 台 不 可 见 状 态 ， 此 时 系统 内 存 不 足 ， 进 程 中 
断 ， 而 后 用 户 退 回 当 前 Activity: 再 次 调用 onCreate 方法 、onStart 方法 、onResume 方法 ， 进 
入 运行 状态 。 

(7) 用 户 退 出 当前 Activity: 系统 先 调 用 onPause 方法 ， 然 后 调用 onStop 方法 ， 最 后 调 
用 onDestory 方法 ， 结 束 当前 Activity。 












' User navigates | 


| Another actvity COmes \ 
in front of the activity 


The activity | 
| comes to the 
2 


‘The activity is no longer Visipble 








4-1 Activity 的 生命 周期 


经 过 一 番 解 释 之 后 ， 相 信 读 者 已 经 能 够 看 懂 图 4-1 中 的 内 容 了 ， 可 是 为 什么 要 这 样 做 呢 ? 

众所周知 ， 管 能 机 相对 于 非 智能 手机 的 一 个 重要 特点 束 在 于 ， 管 能 机 具有 “后 侣 ”， 能 
同时 运行 多 个 程序 。 比 如 可 以 一 边 挂 看 QQ， 一 边 听 音乐 ， 同 时 浏览 微 博 中 的 内 容 ， 而 这 时 
如 果 有 人 打 电 话 进 来 ， 手 机 能 够 目 动 切换 未 接 电话 的 界面 ， 而 这 一 切 都 是 通过 生命 周期 来 实 
现 的 。 
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4.1.2 ”通过 实例 体验 Activity 的 生命 周期 

以 上 介绍 了 Activity 生命 周期 中 的 各 个 过 程 ， 本 小 节 将 以 一 个 简单 的 实例 来 体验 Activity 
生命 周期 中 的 各 个 事件 。 

在 Eclipse 中 新 建 一 个 Android 工程 ， 命 名 为 example4 1， 修 改 其 MainActivity 类 中 的 内 
容 如 范例 4-1 所 示 。 

【范例 4-1】Activity 生命 周期 的 演示 。 
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运行 之 后 即 可 看 到 在 LogCat 窗口 中 显示 出 如 图 4-2 所 示 的 内 容 。 


Time Tag Text 
Activity 生 使 周 期 专 件 启动 onCreate 训 件 
Activity 生 使 周期 亡 件 启动 onStart 亡 件 
ahccivity 生 合同 期 计件 启动 onResume 亡 件 
gralloc goldfish 


01-19 02:51:07.658 
01-19 02:51:07.658 
01-19 02:51:07.698 
01-19 02:51:08.248 





Emulator without GPU emulation detected. 


4-2 ”Activity 启动 时 所 经 历 的 事件 


可 以 通过 设置 过 滤器 来 过 滤 LogCat 中 的 信息 ， 使 之 只 显示 与 该 Activity 有 关 的 记录 ， 如 
图 4-3 所 示 ， 过 滤 后 的 内 容 如 图 4-4 所 示 。 


Logcat Message Filter Settings 


Filter logcat messages by the source's tag, pid or minimum log level. 
Empty fields will match all messages, 


Filter Name: | com.example.example4 1 (Session Filter) 


bylogTag:Activiy 生 天 基本 


byAppicaionNamer cmampe campo 


by tog Lvek (verbowe 





4-3 利用 Tag 标签 过 滤 LogCat 中 的 信息 
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Search for messages. Accepts java regexes. Prefix with pid:, app;, tag: or text: to limit scope. 


"Time PID TID Tag Text 
01-19 02:51:07.658 1313 1313 Activity 生 合同 期 厄 件 语 动 onCreare 村 件 
01-19 02:51:07.658 1313 1313 RMctivity 生 合同 期 事件 启动 onStart 亨 件 
01-19 02:51:07.698 1313 1313 activity 生 爹 同 期 吉 件 启动 onResume 哥 伯 





4-4 过 滤 后 的 LogCat 窗口 


回 过 头 来 再 看 以 上 对 局 动 Activity 的 描述 ， 要 启动 一 个 Activity 需要 经 历 onCreate、 
onStart、onResume 三 个 事件 ， 在 图 4-4 中 可 以 确认 这 一 点 。 可 以 通过 对 手机 的 进一步 操作 来 
验证 以 上 的 内 容 ， 比 如 点 击 Home 键 或 返回 键 来 观察 LogCat 中 的 日 志 记 录 。 

在 Eclipse 的 代码 编辑 区 域 点 击 女 标 右 键 ， 在 弹出 的 菜单 中 ， 依 次 选择 Source|Override 
methods 命令 可 以 看 到 一 些 其 他 的 事件 ， 如 图 4-5 所 示 。 


Select methods to override or implement: 


[© onCreateDescription0 

D2 onCreateDialog(int, Bundle) 

口 多 onCreateDialog(int) 
onCreateNavigateUpTaskStack(TaskStackBuilder) 
onCreatePanelMenulint, Menu) 
onCreatePanelView(int) 
onCreateThumbnail(Bitmap, Canvas) 
onCreateView(String, Context, AttnbuteSet) 
onCreateView(View, String, Context, AttributeSet) 
onDetachedFromWindow0 


Insertion point: 
After onDestoy0! 





[| Generate method comments 


The format of the method stubs may be configured on the Code Templates preference page. 


i 1 of 242 selected. 


® 





4-5 ”Activity 中 的 一 些 其 他 事件 


这 类 事件 大 多 对 应 痢 应 用 的 某 一 特定 操作 或 错误 。 比 如 事件 OnTitleChanged 就 是 在 应 用 
的 标题 被 修改 时 由 系统 所 发 出 的 事件 ， 再 比如 听 音 乐 ， 音 乐 播放 到 1 分 50 秒 时 突然 打 进 来 一 
个 电话 ， 系 统 就 会 对 播放 器 的 Activity 使 用 onPause 方法 ， 同 时 局 动 一 个 接 电话 的 Activity， 
当 用 户 接 完 电话 后 则 又 会 通过 onRestar 方法 和 onStar 方法 返回 音乐 播放 界面 ， 并 调整 音乐 播 
放 进 度 为 1 分 50 秒 。 


4.1.3 ”Cordova 的 生命 周期 

以 上 通过 一 个 简单 的 例子 演示 了 Activity 的 生命 周期 中 事件 的 作用 ， 即 软件 应 用 过 程 中 
发 生 了 某 操作 后 由 系统 产生 的 某 种 啊 应 。 与 之 类 似 的 是 ，Cordova 中 也 有 痢 生 命 周 期 和 事件 
的 概念 。 

在 Cordova 中 ， 系 统 通 过 JavaScript 截获 来 自 于 硬件 的 信息 。 目 前 ，Cordova 可 以 处 理 包 
括 网 络 、 电 量 、 音 量 、 按 钮 等 方面 的 信息 。 当 使 用 Cordova 编写 的 应 用 处 于 运行 状态 时 ， 如 
果 系 统 接收 到 了 某 种 信号 〈 比 如 用 户 按 下 了 音量 键 ) ， 那 么 系统 就 能 够 做 出 相应 的 反馈 。 
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Cordova 的 生命 周期 只 包括 应 用 在 屏幕 中 运行 的 一 部 分 ， 当 应 用 被 暂停 和 重新 运行 时 有 
pause 事件 和 resume 事件 来 与 它们 对 应 。 





Cordova 的 整个 生命 周期 可 以 划分 成 15 种 不 同 的 事件 ， 如 表 4-1 所 示 。 
表 4-1 Cordova 生命 周期 中 的 事件 

名 称 说 明 
pause | 当 程序 被 暂停 到 后 全 运行 时 会 触发 该 事件 
resume ”| 当 程序 被 从 后 台 激 活 到 前 台 运 行 时 会 触发 该 事件 
_online | 当 设 备 网 络 状态 改变 日 是 从 网 络 断 开 状 态 切 换 到 连接 状态 时 触发 此 事件 | 
offline 。 ”| 当 设备 网 络 状态 改变 且 为 从 网 络 连接 状态 切换 到 断 开 状态 时 触发 该 事件 
当 设 备 电量 过 低 超过 了 某 个 临界 点 时 该 事件 被 触发 ， 临 界 点 的 值 由 设备 决定 ， 一 般 为 10% 
当 电池 剩余 电量 发 生 1% 的 改变 时 会 触发 该 事件 
当 用 户 点 击 “ 返 回 ”按钮 时 该 事件 被 触发 

当 用 户 点 击 “菜单 ”按钮 时 会 触发 该 事件 
当 用 户 “ 按 下 ”通话 按钮 时 会 触发 该 事件 
当 用 户 点 击 “ 挂 断 ” 按 钮 时 会 触发 该 事件 
当 用 户 按 下 “音量 减 小 ”按钮 时 会 触发 该 事件 
当 用 户 按 下 “音量 增 大 ”按钮 时 会 触发 该 事件 


当 用 户 按 下 “搜索 ”按钮 时 触发 该 事件 


看 上 去 似乎 有 些 混乱 ， 既 不 是 按照 字母 顺序 也 没有 按照 单词 长 度 ， 但 是 按照 表格 右 侧 的 
解释 来 看 却 又 有 一 定 的 规律 。 实 际 上 这 张 表 格 是 笔者 经 过 了 深思 熟 虑 ， 按 照 事件 的 性 质 将 它 
们 重新 分 组 后 得 来 的 结果 ， 按 照 笔者 的 想法 ， 这 15 个 事件 可 以 分 为 以 下 三 类 。 


1. 程序 加 载 事 件 

包括 deviceready、pause 和 resume 3 个 事件 ， 用 于 对 程序 的 加 载 完 毕 〈( 即 生命 周期 的 开 
始 ) 、 暂 停 和 恢复 进行 处 理 。 

2. 被 动 消息 事件 


用 于 对 程序 运行 期 间 设备 发 生 的 一 些 变化 进行 处 理 ， 如 电池 电量 的 变化 、 网 络 断 开 等 。 
包括 以 下 5 个 事件 : online、offline、batterycritical、batterylow、batterystatus。 由 于 这 些 事件 
不 是 用 户 本 人 可 以 控制 的 ， 如 电池 的 电量 不 可 能 由 于 用 户 的 意愿 而 突然 增加 。 因 此 笔者 称 其 
为 被 动 消息 事件 。 
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3. 主动 消息 事件 


包括 backbutton 、 menubutton 、 startcallbutton 、 endcallbutton 、 volumedownbutton 、 
volumeupbutton 和 searchbutton 这 7 个 事件 ， 分 别 在 用 户 按 下 相应 的 按钮 时 进行 啊 应 。 

裔 要 注意 的 是 ， 并 不 是 每 部 设备 部 具备 这 些 按钮 ， 比 如 在 诺基亚 最 新 发 布 的 Nokia X 手 
机 中 就 只 有 正面 的 返回 按钮 以 及 侧面 的 音量 键 。 因 此 如 果 想 在 这 样 的 设备 中 对 “搜索 ”按钮 
的 操作 进行 处 理 是 不 可 能 的 。 而 即使 是 在 目前 主流 的 安 单 手机 中 一 般 也 省 略 掉 了 “搜索 键 ” 
而 仅 保留 “返回 ”“ 菜 单 ” 以 及 在 Cordova 中 没有 提 到 的 Home 按钮 ， 如 图 4-6 中 所 示 。 





图 4-6 “三 按钮 布局 已 成 为 当前 安 卓 手机 的 主流 设计 


使 用 程序 加 载 事件 


在 了 解 了 Cordova 中 都 有 哪些 事件 之 后 ， 本 节 将 开始 对 这 些 事件 的 用 法 进行 详细 的 介 
绍 。 本 节 要 介绍 的 是 程序 加 载 事 件 ， 也 就 是 deviceready、pause 和 resume 这 3 个 事件 。 
【范例 4-2】 程序 加 载 事 件 的 使 用 。 


01 <!DOCTYPE html> 

02 <htmli> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 程 序 加 载 事 件 的 使 用 </title> 

06 <!-- 引 入 Cordova 脚本 文件 --> 

07 <script src="cordova.js" type="text/javascript"/><script 
type="text/javascript"/> 

08 // 声明 当 设 备 加 载 完 毕 时 的 回调 函数 onDevieReady 


09 document .addEventListener("deviceready", onDeviceReady, false); 
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程序 运行 之 后 ， 系 统 会 目 动 对 Cordova 中 的 脚本 进行 加 载 ， 然 后 弹出 如 图 4-7 所 示 的 界 
和 面 ， 表 明 设 备 加 载 完 毕 。 而 当 用 户 点 击 “ 人 返回 ”按钮 或 Home 按钮 时 ， 也 会 弹出 相应 的 对 话 
框 ， 如 图 4-8 所 示 ， 但 是 不 等 笔者 反应 过 来 点 击 OK 按钮 ， 程 序 就 已 经 被 置 入 后 台 了 。 
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程序 被 暂停 了 ! 





图 4-7 设备 加 载 完毕 后 弹出 对 话 框 图 4-8 程序 被 暂停 时 同样 弹出 对 话 框 提示 


按照 道理 来 说 ， 如 果 此 时 再 运行 该 程序 也 会 弹出 相应 的 对 话 杠 ， 但 是 真相 是 当 青 次 运行 
该 程序 时 却 没有 对 话 框 弹出 提示 “程序 被 恢复 ”。 这 并 不 是 写 错 了 某 段 代码 导致 的 ， 而 是 由 
于 Cordova 的 某 些 特定 调用 关系 所 决定 的 ， 为 了 证 明 这 一 点 ， 现 在 对 范例 的 第 13、23 和 28 
行 做 修改 。 在 此 次 修改 中 放弃 了 利用 alert 方式 弹出 对 话 框 ， 而 是 利用 console.log 方法 使 得 当 
相应 的 函数 被 执行 时 ， 在 Eclipse 的 LogCat 面板 上 输出 信息 。 


// 当 设 备 加 载 完 毕 后 就 会 执行 该 函数 
function onDeviceReady() { 


console.1og ("设备 加 载 完毕 ! ") ; 





} 
// 当 程序 被 暂停 时 执行 该 函数 


function onPause() { 


console.1og ("程序 被 暂停 了 ! ") ; 
} 
// 当 程 序 被 从 暂停 状态 恢复 时 执行 该 函数 
function onResume() { 
console.1og ("设备 恢复 了 ! ") ; 
} 


然后 再 运行 该 程序 ， 在 LogCat 和 面板 上 输出 的 信息 如 图 4-9 所 示 。 
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Search for messages, Accepts Java regexes. Prefix with pid:, app: tag' or text: to limit scope， 


Time PID TID Application Tag Text 
04-10 07:02:19.758 1463 1463 com.example.helloword CordovaLog 设备 加 载 完 毕 ! 
04-10 07:02:26.768 1463 1463 com.example.helloword CordovaLog 程序 被 暂 信 了 ! 
04-10 07:02:33.988 1463 1463 com.example.helloword CordovaLog 设备 恢复 了 ! 





4-9 ”LogCat 中 的 信息 


事实 证 明 当 程序 从 和 暂停 状态 下 恢复 时 ， 如 果 调 用 一 些 DOM 操作 可 能 会 得 不 到 所 预期 的 
结果 ， 这 与 安 早 平台 下 Cordova 的 兼容 性 和 运行 效率 等 因素 有 关 ， 在 实际 开发 时 需要 特别 注 
意 这 一 氮 。 

下 向 结合 本 范例 来 说 明 Cordova 中 各 个 事件 的 使 用 方法 ， 通 过 范例 的 第 9、16 和 18 行 可 
以 看 出 ， 在 Cordova 中 如 果 想 对 某 个 事件 进行 操作 只 需要 按照 “document.addEventListener 
("eventname",function ,false):* 这 样 的 格式 进行 定义 束 可 以 了 。 其 中 eventname 是 需要 定义 的 
事件 名 称 ， 而 function 则 是 负责 对 该 事件 进行 啊 应 的 和 目 定义 函数 。 


仔细 观察 范例 可 以 发 现 一 个 有 意思 的 问题 ， 那 就 是 对 pause 和 resume 两 个 事件 的 声明 是 
在 设备 加 载 完毕 之 后 进行 的 ， 这 是 一 个 非常 好 的 习惯 ， 每 一 个 Cordova 开发 者 都 要 努力 





适应 这 一 点 。 


趁 此 机 会 再 介绍 一 点 额外 的 知识 ， 那 就 是 在 Cordova 中 进行 调试 的 方法 。 在 程序 开发 时 
经 常会 遇 到 一 些 意 外 的 错误 ， 一 般 来 说 可 以 通过 在 特定 的 位 置 输出 一 些 数据 来 验证 程序 出 错 
的 位 置 。 这 时 就 需要 考虑 使 用 什么 方法 来 获取 这 些 数据 了 。 

对 于 习惯 了 Web 开发 的 开发 者 来 说 ， 利 用 alert 方法 在 对 话 框 中 弹出 数据 是 一 种 非常 方便 
的 选择 ， 但 是 在 实际 使 用 中 这 种 方法 并 不 是 非常 方便 ， 因 此 就 常常 采用 console.log 方法 输出 
信息 以 便于 调试 。 

除了 利用 console.log 方法 之 外 ， 还 有 许多 人 喜欢 利用 JavaScript 的 DOM 操作 将 结果 直接 
输出 在 页 面 中 ， 在 某 些 情况 下 ， 比 如 需要 统计 某 一 变量 在 一 段 时 间 内 的 变化 情况 ， 这 种 方法 
也 是 非常 实用 的 。 


4 .3 使 用 被 动 消息 事件 


本 节 将 继续 介绍 Cordova 中 的 另 一 类 事件 : 被 动 消息 事件 。 这 类 事件 有 一 个 共同 的 特点 
是 非常 难以 调试 。 如 果 想 要 对 batterycritical 事件 进行 测试 ， 可 能 就 只 有 等 到 电量 下降 到 茶 个 
程度 才 可 以 得 到 结果 ， 尤 其 是 这 些 数据 还 无 法 利用 虚拟 机 进行 模拟 。 男 外 ， 这 类 事件 在 使 用 
上 往往 还 比较 鸡肋 ， 比 如 开发 者 对 电量 事件 的 使 用 不 外 乎 当 电 量 低 到 一 定 程 度 时 提醒 用 户 充 
电 ， 可 是 实际 上 安里 系统 本 喘 也 会 做 同样 的 事情 。 因 此 开发 者 会 尽量 不 使 用 这 撩 事件。 

虽然 会 避免 使 用 它们 ， 但 是 该 介绍 的 知识 点 一 个 也 不 能 少 ， 这 束 让 笔者 突然 想起 了 一 名 
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古话 叫做 “和 敬 鬼 神 而 远 之 ”。 可 能 开发 者 在 和 面 对 不 少 “ 不 好 用 ”的 API 时 都 是 这 样 的 态度 
吧 。 下 面 回 到 正题 ， 请 看 范例 4-3 中 的 例子 。 
【范例 4-3 】 补 动 消息 事件 的 使 用 。 
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运行 之 后 的 结果 如 图 4-10 所 示 。 


Alert 


电池 状态 改变 了 ， 剩余 电量 : 47% 


OK 





图 4-10 电池 状态 改变 时 弹出 对 话 框 


有 的 读者 也 许 会 非常 佩服 笔者 的 敬业 ， 可 以 为 了 找 一 张 书 中 实用 的 图 片 而 静 等 电量 变 
化 ， 这 里 要 介绍 一 个 独家 罕 门 ， 那 就 是 可 以 人 为 地 创造 batterystatus 事件 。 比 如 拿 痢 手机 ， 
启动 范例 程序 ， 把 手机 充电 器 插 上 去 ， 电 量 状态 就 改变 了 ， 再 拔 下 来 又 改变 一 次 。 

这 一 组 事件 的 使 用 方法 与 之 前 介绍 的 一 样 ， 但 是 在 电池 事件 的 回调 函数 中 加 入 了 参数 ， 
这 里 使 用 的 info 对 象 〈 如 第 41 行 所 示 ) 封装 了 相关 电量 的 一 些 信 息 。 它 包含 了 两 个 属性 ， 
分 别 是 level (用 于 记录 当前 电量 的 百 分 值 ， 取 值 范 围 为 从 0~100) 和 isPlugged (用 于 记录 当 
前 是 否 为 充电 状态 ) 。 

由 于 这 类 事件 非常 难以 捕捉 ， 在 测试 时 可 以 将 具体 的 函数 操作 写 在 batterystatus 事件 的 
回调 函数 中 进行 测试 ， 测 试 完成 后 再 移 回 到 和 它 该 待 的 地 方 就 可 以 了 。 
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全 .A 使 用 主动 消息 事件 


与 上 一 节 介 绍 的 5 个 事件 相 比 ， 本 节 要 介绍 的 7 个 事件 简直 是 平易 近 人 ， 因 为 直接 
通过 点 击 按钮 就 可 以 对 它们 进行 测试 。 它 们 的 使 用 方法 与 之 前 介绍 的 8 种 事件 完全 一 
样 ， 范 例 4-4 是 使 用 这 些 事件 的 一 个 例子 。 

【范例 4-4】 使 用 主动 消息 事件 。 
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程序 运行 之 后 ， 依 次 按 下 各 按钮 可 以 看 到 相应 的 对 话 框 弹出 ， 最 后 的 结果 如 图 4-11 和 图 
4-12 所 示 。 


菜单 按钮 被 按 下 
OK 





图 4-11 菜单 按钮 被 按 下 图 4-12 返回 按钮 被 按 下 
其 他 按钮 也 是 类 似 ， 不 过 需要 注意 的 是 ， 这 里 所 说 的 按钮 必须 是 实体 或 专门 的 虚拟 按钮 
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才 有 效 。 比 如 图 4-13 所 示 的 平板 电脑 的 虚拟 返回 键 是 有 效 的 ， 但 是 在 一 些 应 用 中 的 “返回 ” 
按钮 是 不 能 触发 backbutton 事件 的 。 








图 4-13 茶 球 平板 电脑 中 的 虚拟 键 


最 后 需要 说 明 的 是 ， 对 音量 增 和 音量 减 按钮 的 触发 事件 由 于 与 系统 本 喘 的 音量 功能 ; 
突 ， 所 以 在 大 多 数 的 场合 下 是 无 效 的。 为 外 ， 目 前 的 大 多 数 手机 已 经 没有 了 通话 控 钮 和 通话 
结束 按钮 ， 因 此 这 两 个 事件 也 无 法 进行 测试 了 。 


虽然 Cordova 为 开发 者 提供 了 各 种 事件 ， 但 是 除了 deviceready 在 开发 中 有 着 广泛 的 应 用 


之 外 ， 其 他 事件 的 应 用 价值 不 大 。 因 此 还 请 各 位 开发 者 能 够 以 理性 的 态度 使 用 它们 。 





小 结 
本 章 首 先 介 绍 了 Activity 的 生命 周期 ， 通 过 案例 让 读者 了 解 什么 是 生命 周期 。 接 着 介绍 


了 Cordova 的 生命 周期 有 哪些 事件 ， 并 将 这 些 事 件 分 了 3 类 : 程序 加 载 事 件 、 被 动 消息 事 
件 、 主 动 消息 事件 。 本 章 最 后 通过 3 个 案例 来 介绍 了 如 何 使 用 这 3 类 事件 。 
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本 章 将 介绍 Cordova 利用 API 获 取 设 备 信息 的 方法 。 利 用 这 些 API， 开 发 者 可 以 获取 与 设 
备 相关 的 一 些 信息 ， 如 手机 的 型 号 、Cordova 的 版 本 ， 以 及 所 使 用 的 操作 系统 等 信息 ， 为 开发 
者 进一步 实现 其 他 的 功能 奠定 基础 。 





本 章 的 主要 知识 点 有 : 


@ Cordova 中 API 的 使 用 方法 。 

如 何 将 API 获取 的 信息 显示 在 屏幕 上 。 
如 何 进一步 使 用 API。 

如 何 美化 利用 Cordova 开发 的 应 用 。 


D5 e Cordova 获取 设备 信息 


除了 能 够 将 HTML 页 面 打 包 成 可 以 直接 安装 运行 的 APP 外 ，Cordova 的 一 个 最 大 优势 在 
于 可 以 通过 JavaScript 调用 设备 来 访问 设备 上 的 硬件 信息 ， 从 而 实现 一 些 原 本 只 有 依靠 原生 
SDK 才能 够 达到 的 目的 。 范 例 5-1 就 展示 了 一 个 利用 API 来 获取 设备 信息 的 例子 。 


【范例 5-1】 利 用 Cordova 获取 设备 信息 。 
先 在 命令 行进 入 到 项 目 文 件 夹 下 ， 执 行 以 下 命令 添加 插件 : 


cordova plugin add cordova-plugin-device 








使 用 Cordova 编译 之 后 ， 运 行 结果 如 图 5-1 所 示 。 


eeeo0 中 国电 信 令 22:33 G70»3BD; 


cordova 


5-1 利用 Cordova 显示 设备 信息 


通过 本 例 可 以 看 出 ， 使 用 Cordova 中 API 的 方法 与 使 用 原生 JavaScript 和 HTML 的 方法 
没有 什么 不 同 ， 只 是 多 了 一 些 事先 定义 好 的 类 ， 如 范例 第 15 行 中 的 device。 
Cordova 定义 了 一 个 类 device， 其 中 包含 了 name、cordova、platform、uuid、version 这 5 


67 





Apache Cordova 移动 应 用 开发 实战 


个 成 员 变 量 ， 分 别 存放 设备 的 设备 名 称 、Cordova 版 本 号 、 操 作 系 统 、 设 备 编号 和 操作 系统 
版 本 ， 使 用 时 可 以 直接 引用 。 


不 同 的 Cordova 版 本 ， 此 处 测试 会 略 有 不 同 。 





在 范例 的 第 15~19 行 就 是 使 用 了 innerHTML 操作 来 将 device 类 中 的 信息 显示 到 页 面 元 
素 中 ， 而 页 面 元 素 是 在 第 13 行 中 利用 元 素 的 id 属性 来 获取 的 。 熟 悉 JavaScript 的 读者 可 以 发 
现 ， 这 与 JavaScript 的 DOM 操作 完全 相同 。 


D5 e 2 device 类 的 异常 情况 


上 一 节 介 绍 了 一 个 利用 Cordova 获取 设备 信息 的 例子 ， 但 是 细心 的 读者 一 定 会 发 现 ， 在 
设备 名 称 处 显示 的 内 容 是 undefined， 这 又 是 为 什么 呢 ? 要 解决 这 个 疑问 就 必须 深入 了 解 
device 类 中 每 个 属性 的 值 。 

name 属性 用 来 描述 设备 的 名 称 ， 这 个 值 由 制造 商 决 定 ， 也 就 是 说 ， 即 使 是 同一 球 手 机 ， 
由 于 生产 批 次 不 同 ， 最 终 的 设备 名 称 也 可 能 不 同 。 但 是 还 会 有 一 些 例 外 的 情况 ， 比 如 在 
Android 设备 中 第 和 贡 获 取 到 的 是 设备 的 产品 名 称 ， 大 名 易 易 的 Nexus 系列 获取 的 名 称 就 是 
Passion， 而 在 苹果 的 设备 中 该 属性 获取 的 值 是 iTunes 中 设 定 的 用 户 名 。 上 一 节 的 范例 由 于 采 
用 的 是 虚拟 机 ， 所 以 无 法 获取 设备 名 称 ， 因 而 显示 成 了 undefined。 

Cordova 属性 的 值 比 较 固定 ， 一 般 都 是 当前 所 使 用 的 Cordova 的 版 本 写 ， 范 例 之 所 以 读 
取出 错 也 是 由 于 虚拟 机 的 缘故 。 





其 实 该 属性 并 没有 什么 使 用 价值 ， 因 此 无 论 正确 还 是 错误 ， 影 响 都 不 大 。 





platform 属性 用 来 保存 设备 所 使 用 的 操作 系统 的 名 称 ， 在 范例 中 非常 正确 地 识别 出 了 设 
备 的 操作 系统 为 OS。 当然 如 果 设 备 采 用 的 安 曲 的 设备 就 会 显示 Android。 男 外 黑 夺 手机 中 显 
示 的 该 属性 是 所 使 用 的 rom 版 本 号 ， 这 对 没有 使 用 过 黑 等 的 开发 者 来 说 也 许 会 比较 陌生 ， 但 
是 请 放心 ， 黑 等 的 用 户 都 能 够 理解 这 组 编号 。 

uuid 的 值 对 于 用 户 来 说 是 非常 重要 的 ， 因 为 这 个 值 对 于 每 台 设 备 来 说 就 像 是 身份 证 一 
样 ， 它 是 唯一 的 ， 在 开发 一 些 手 机 防盗 应 用 时 会 经 常 使 用 。 


刁 直 不 只 是 移动 设备 ， 电 脑 的 CPU、 网 卡 、 显 卡 等 设备 中 也 会 用 到 该 值 ， 图 5-2 是 在 电脑 的 


BIOS 中 查看 电脑 的 uuid 值 。 
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26523BC98C329 
JlMH1F23S56A2 
Hobile Intel(R) Pentium(R) II 
1.006Hz 





S12MB 
B875e0601-44d5-11cb-8f44-8db2d 
(Internal IANY AA MM 59 BF 54 S52 


5-2 在 BIOS 中 查看 电脑 的 uuid 


version 属性 用 来 显示 设备 的 具体 版 本 号 ， 比 如 范例 中 的 iOS 系统 为 10.0.1 版 本 ， 知 道 了 
该 属性 可 以 根据 设备 的 版 本 号 来 对 一 些 功能 加 以 取舍 ， 来 保证 APP 运行 的 流畅 性 。 


= 8 3 实战 : 用 Cordova 制作 一 个 简单 的 应 用 


前 面 几 节 介 绍 了 使 用 Cordova 获取 设备 信息 的 方法 ， 可 是 仅仅 通过 一 个 简单 的 例子 显然 
是 无 法 直接 应 用 到 真实 开发 中 的 。 因 此 本 节 束 来 做 一 个 复习 ， 利 用 已 经 学 过 的 知识 来 实现 一 
个 查看 设备 信息 的 简单 应 用 。 

本 次 的 任务 非常 明确 ， 就 是 要 实现 一 个 简单 的 页 面 ， 在 屏幕 侦 下 方 的 位 置 有 一 个 按键 ， 
当 用 户 按 下 它 时 将 会 在 屏幕 的 上 半 部 分 显示 出 设备 的 信息 ， 同 时 要 保证 应 用 的 流畅 性 和 美 
观 。 


5.3.1 界面 设计 及 实现 

由 于 这 款 应 用 功能 非常 单一 ， 而 且 只 有 一 个 页 面 ， 因 此 页 面 中 的 样式 利用 自 定义 的 CSS 
来 实现 ， 既 不 会 太 麻烦 也 能 够 保证 应 用 运行 的 高 效 性 。 为 了 保证 良好 的 交互 性 ， 应 用 要 对 用 
户 的 操作 做 出 简单 的 反馈 ， 如 点 击 按钮 时 按钮 会 变色 、 显 示 设 备 信息 前 会 有 一 段 动画 作为 组 
冲 等 。 

范例 5-2 是 该 项 目 使 用 的 基本 界面 。 

【范例 5-2】 应 用 界面 的 基本 实现 。 
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编译 之 后 ， 运 行 结果 如 图 5-3 所 示 。 虽 然 看 上 去 比较 有 山寨 感 ， 也 许 很 难 与 美观 这 个 词 
联系 到 一 起 ， 但 是 它 已 经 具备 了 一 个 完整 的 应 用 界面 所 需要 的 各 种 要 系 。 

上 述 代码 最 先 实现 的 是 背景 ， 由 于 本 例 非常 简单 ， 因 此 可 以 直接 为 body 加 入 background 
属性 。 不 过 在 这 之 前 先 要 做 一 点 小 小 的 准备 来 清除 浏览 器 默认 的 一 些 设置 ， 如 范例 第 10~14 
行 所 示 。 这 是 由 于 浏览 器 默认 会 带 有 一 些 样式 〈 如 元 素 的 外 边 距 ) ， 这 就 导致 了 页 面 的 四 周 
可 能 会 有 一 段 的 空白 ， 因 此 要 坚决 取消 。 

在 body 标签 中 有 一 个 height 属性 要 特别 注意 ， 由 于 在 WebKit 内 核 的 浏览 器 中 使 用 渐变 
背景 色 与 理论 百分比 设置 的 长 款 无 法 完美 地 兼容 ， 因 此 就 只 能 设置 一 个 大 概 的 高 度 。 虽 然 说 
设备 的 屏幕 高 度 是 无 法 预期 的 ， 但 是 可 以 设置 一 个 比 屏幕 高 度 要 大 一 些 的 高 度 ， 这 样 就 能 够 
保证 不 影响 屏幕 的 效果 《在 本 例 中 紫色 的 部 分 就 由 于 超出 了 屏幕 范围 而 没有 显示 ， 并 不 影响 
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获取 设备 信息 


5-3 ”实现 后 的 应 用 界面 


范例 第 39~51 行 是 按钮 的 CSS 样式 ， 它 首先 使 用 了 CSS 3 中 的 圆 角 属性 ， 然 后 又 为 圆 角 
加 入 了 一 个 边框 ， 保 证 按钮 的 颜色 能 够 与 周围 的 背景 色 有 一 个 明显 的 区 分 。 

为 了 增强 用 户 点 击 按钮 的 交互 性 ， 在 范例 的 第 53 行 又 为 按钮 加 入 了 一 个 伪 类 ， 使 按钮 在 
被 用 户 点 击 后 改变 颜色 ， 这 样 用 户 能 够 清楚 地 感觉 到 应 用 做 出 了 回应 。 图 5-4 为 按钮 被 点 击 
时 的 样子 。 









卫 元 在 实际 开发 时 还 可 以 为 按钮 加 入 一 些 图 片 或 阴影 效果 。 





5-4 ” 当 按 钮 被 点 击 时 变 为 红色 


Fa 
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5.3.2 ”为 应 用 加 入 功能 

以 上 已 经 实现 了 利用 HTML 5 与 CSS 3 来 完成 应 用 的 界面 ， 本 小 节 将 为 该 界面 加 入 获取 
设备 信息 的 功能 。 许 多 读者 一 定 会 认为 本 小 节 是 在 画蛇添足 ， 因 为 他 们 会 认为 只 要 把 范例 
5-2 中 的 代码 复制 到 界面 中 就 可 以 了 ， 实 际 上 却 并 不 是 这 样 ， 这 是 为 什么 呢 ? 请 看 范例 5-3 中 
的 代码 。 

【范例 5-3】 为 应 用 加 入 功能 。 
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编 详 并 运行 之 后 ， 按 下 按钮 获取 设备 信息 后 的 结果 如 图 5-5 所 示 。 


一 一 
Cordova 版 本 : 4.2.1 
操作 系统 : iOS 
设备 编号 : SB36B6A2-3FFB- 
4AE7-952A-7CATFFEIFEOS 
操作 系统 版 本 : 10.0.1 







5-5 应 用 运行 后 的 效果 


观察 范例 的 第 89 行 ， 此 处 为 按钮 加 入 了 一 个 onclick 事件 ， 当 它 被 点 击 时 会 运行 第 19 行 
处 的 get_info0) 函 数 。 由 于 这 样 并 不 能 知道 系统 是 否 已 经 加 载 好 了 设备 ， 因 此 必须 在 页 面 刚 刚 
被 载 入 时 加 入 一 个 标志 变量 〈 如 第 10 行 ) 。 

在 代码 第 14 行 ， 由 于 设备 已 经 完成 了 加 载 ， 因 此 可 以 在 函数 中 为 标志 变量 赋值 ， 如 第 
17 行 所 示 。 这 样 ， 如 果 设 备 没 有 完成 加 载 ， 点 击 按钮 就 是 无 效 的 了 。 

在 实际 开发 中 ， 也 许 还 要 考虑 到 用 户 在 设备 加 载 完成 前 就 点 击 了 按钮 长 时 间 等 待 后 不 耐 
烦 的 情况 ， 这 时 就 可 以 再 加 入 一 个 新 的 函数 ， 利 用 一 个 计时 器 函数 不 断 地 读 取 标志 变量 的 
值 ， 同 时 在 屏幕 上 方 输出 “请 用 户 等 待 ” 的 信息 。 当 读 取 到 isready 变量 值 为 1 时 ， 再 执行 将 
设备 信息 显示 出 来 的 操作 。 


至 此 ， 一 个 简单 的 设备 信息 查看 APP 就 算是 完成 了 ， 读 者 如 果 有 兴趣 也 可 以 在 接 下 来 的 
学 习 中 继续 完善 ， 为 它 加 入 更 多 的 特效 或 功能 。 
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5.4 小 结 


本 章 主 要 学 习 了 利用 Cordova 来 获取 设备 信息 的 方法 ， 读 者 从 中 可 以 看 出 Cordova 中 的 
操作 几乎 是 完全 按照 原生 JavaScript 的 语法 来 进行 的 ， 这 是 它 的 一 个 巨大 的 优势 。 除 此 之 
外 ， 本 章 还 进行 了 一 次 实际 的 开发 实战 ， 通 过 这 次 实战 能 够 学 到 如 何 将 知识 点 运用 到 实际 
APP 中 。 本 章 的 内 容 虽 然 简单 ， 但 是 很 关键 ， 希 望 读者 都 能 动手 杀 目 实践 这 些 范 例 。 
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通讯 录 不 仅 是 手机 用 户 最 常 接触 的 一 个 功能 ， 也 是 手机 最 基础 的 功能 之 一 ， 市 面 上 也 不 
乏 类 似 的 应 用 。 即 使 是 这 样 ， 开 发 者 在 通讯 录 上 总 能 够 找到 新 的 亮点 来 开发 出 有 创意 、 有 前 
景 的 应 用 ， 所 以 掌握 Cordova 对 通讯 录 信 息 的 获取 非常 重要 。 本 章 将 制作 一 个 简单 的 通讯 录 
管理 软件 从 而 使 读者 能 够 将 知识 应 用 到 实际 开发 中 去 。 





本 章 的 主要 知识 点 有 : 


@ 通讯 录 信 息 的 获取 。 

如 何 利 用 JavaScript 获取 通讯 录 中 的 联系 人 信息 。 
利用 Cordova 在 通讯 录 中 加 入 一 个 新 的 联系 人 。 
如 何 从 通讯 录 中 删除 一 个 联系 人 。 

如 何 使 用 Cordova 在 通讯 录 中 查找 特定 的 联系 人 。 


6. il 创建 一 个 Contact 对 象 


本 节 学 习 使 用 Cordova 操作 手机 通讯 录 。Cordova 把 有 关 通 讯 录 的 信息 封装 在 一 个 
Contact 类 中 ， 因 此 在 对 通讯 录 进 行 操作 前 首先 要 创建 一 个 Contact 对 象 。 

首先 在 命令 行 执行 命令 添加 插件 : cordova plugin add cordova-plugin-contacts 

【范例 6-1】 创 建 一 个 Contact 对 象 。 
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编 详 运 行 之 后 如 图 6-1 所 示 ， 对 话 框 中 显示 了 刚刚 创建 的 Contact 对 象 的 信息 。 


index.html 


The contact, Test User, is of the male 
gender 


OK 





6-1 ”显示 创建 出 的 Contact 对 象 


在 Cordova 中 使 用 类 Contact 来 管理 通讯 录 ， 每 次 要 对 通讯 录 进 行 操作 前 ， 首 先 要 使 用 
语句 var contact = navigator.contacts.create(properties) 来 实例 化 一 个 Contact 对 象 ， 如 范例 中 第 
13 行 所 示 。 


78 





第 6 章 通讯 录 信 息 的 获取 


一 


~ 






| 3 : Eo Cordova 官方 给 出 的 说 明 中 使 用 了 var contact= navigator.service.contacts.create(properties)， 但 是 
该 语句 仅 在 1.0 版 本 的 Cordova 中 有 效 ， 在 之 后 的 版 本 中 去 掉 了 service， 因 此 如 果 照 抄 
官方 demo， 在 运行 时 很 可 能 出 错 。 


范例 第 15 行 还 设置 了 Contact 对 象 的 gender 属性 为 male， 在 本 例 中 并 没有 实际 的 意义 ， 
只 是 为 了 展示 对 Contact 对 象 进行 操作 的 方法 。 结 合 图 6-1 中 的 内 容 可 以 清楚 地 看 到 经 过 这 番 
操作 之 后 Contact 对 象 的 属性 。 


加 .2 利用 find() 方 法 查询 通讯 录 


上 一 节 通 过 Contact 中 的 create(0) 方 法 创建 了 一 个 新 的 Contact 对 象 ， 本 节 将 介绍 Contact 
对 象 中 的 另 一 个 方法 find(0)。 它 用 来 查询 通讯 录 中 的 数据 ， 能 够 返回 一 个 或 多 个 包含 指定 字段 
的 Contact 对 象 〈 即 一 个 类 型 为 Contact 的 数组 ) 。 范 例 6-2 就 是 一 个 使 用 find0) 方 法 查询 通 
讯 录 的 例子 。 
【范例 6-2】find() 方 法 的 使 用 。 





79 


Apache Cordova 移动 应 用 开发 实战 





顷 诺 运行 之 后 ， 点 击 屏幕 上 的 “Cordova 中 的 联系 人 ” 几 个 字 得 到 如 图 6-2 所 示 的 界面 。 






(和 3 品 。 在 运行 之 前 一 定 要 保证 通讯 录 中 有 联系 人 ， 不 然 无 法 得 到 相应 的 结果 。 


范例 第 32 行使 用 find() 方 法 来 查找 资料 中 包含 Cat 的 联系 人 ， 在 使 用 该 方法 之 前 必须 要 
创建 两 个 参数 options (第 29 行 ) 和 fields (第 31 行 ) 。options 参数 中 包含 了 要 查询 的 内 
容 ， 比 如 本 例 中 options.filter 的 值 为 Cat。fields 参数 则 是 定义 此 次 查找 的 目标 字段 ， 即 
displayName 和 name。 


按照 西方 的 命名 习惯 ,联系 人 的 姓 和 名 是 分 开 的 ， 而 displayName 字段 就 可 以 看 作 是 姓 





和 名 的 组 合体 。 


除了 这 两 个 参数 ， 使 用 find() 方 法 时 还 要 在 其 中 男 外 定义 两 个 参数 ， 其 中 onSuccess 用 来 
执行 查询 操作 。 在 执行 find() 方 法 之 后 ， 符 合 条 件 的 Contact 信息 将 会 存放 在 一 个 数组 中 ， 可 
以 在 onSuccess 函数 中 对 它们 进行 处 理 。onError 函数 则 是 用 来 指定 find0 方 法 出 错时 的 提 
地。 
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Alert 


联系 人 是 :Cat 





6-2 查询 含有 Cat 的 联系 人 的 结果 
此 外 还 要 知道 ， 第 32 行 查 找 联 系 人 的 API 使 用 了 多 个 参数 ， 其 中 分 别 使 用 了 onSuccess 
和 onError 录 数 来 对 API 调用 成 功 和 失败 的 情况 进行 处 理 ， 而 不 是 直接 定义 API 的 返回 值 。 
Cordova 提供 的 API 中 大 多 使 用 了 这 样 的 方法 。 


Contact 对 象 的 属性 


在 之 前 的 内 容 中 曾经 多 次 用 到 Contact 对 象 ， 也 学 习 了 Contact 的 两 个 方法 create0 和 
find()， 但 是 作为 一 个 类 ，Contact 又 有 哪些 属性 呢 ? 这 是 本 节 将 要 介绍 的 主要 内 容 。 
打开 手机 的 通讯 录 ， 新 建 一 个 联系 人 会 打开 如 图 6-3 所 示 的 界面 。 可 以 看 到 每 一 个 联系 


人 都 包括 了 姓名 、 电 话 、 住 址 、 邮 箱 等 内 容 ， 而 这 些 内 容 就 是 存储 在 类 Contact 对 象 中 的 信 
息 。 表 6-1 中 记录 了 Contact 各 个 属性 的 名 称 和 意义 。 
2 
\” DONE 8 


Phone-only unsynced co El; 
Name 


Add organization 


PHONE 


Phone MOBILE 
P| 

EMAIL 

Emall HOME 
py | 

ADDRESS 

Address HOME 

Add another field 


6-3 ”在 安里 手机 中 新 建 一 个 联系 人 
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表 6-1 Contact 中 的 属性 
属性 名 称 类 型 介绍 
|smmg MAR 从 
dipayame | sumg | 联系 人 最 终 昌 示 的 g 称 
mm 联系 人 的 姓名 
Cimame |Sting | 了 和 人 的 喇 


联系 人 的 电话 
联系 人 的 电子 邮箱 
联系 人 的 全 部 住址 
联系 人 的 全 部 IM 地 直 
organizations 。 |ContactOrganization 型 数组 。 | 联系 人 的 所 在 单位 、 组 织 等 信息 
一 一 一 
联系 人 的 备 态 、 注 释 等 信息 


Fr 


用 户 对 联系 人 添加 的 自 定义 信息 


rE | 了 区 





范例 6-3 将 利用 本 节 介 绍 过 的 属性 新 建 一 个 联系 人 信息 并 保存 。 
【范例 6-3】 利 用 Contact 对 象 新 建 一 个 联系 人 。 
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编译 运行 之 后 ， 点 击 屏 幕 上 的 “新 建 一 个 联系 人 ”， 可 以 弹出 一 个 对 话 框 ， 内 容 为 “新 
建 联系 人 成 功 ”， 如 图 6-4 所 示 。 之 后 查看 手机 的 通讯 录 可 以 看 到 确实 在 通讯 录 中 增加 了 一 
个 新 的 联系 人 Jane Doe， 如 图 6-5 所 示 。 


83 


Apache Cordova 移动 应 用 开发 实战 


4 


新 建 联系 人 成 功 w 








White Cat 新 建 的 联系 人 





6-4 ”提示 新 建 联 系 人 成 功 图 6-5 新 建立 的 联系 人 为 Jane Doe 


本 范例 要 特别 注意 的 是 在 第 23~26 行 对 name 属性 的 保存 ， 必 须 新 建 一 个 ContactName 
对 象 。 此 外 建议 在 创建 displayname 和 nickname 属性 时 尽量 使 它们 一 致 ， 因 为 在 某 些 系统 中 
这 两 个 属性 是 混用 的 ， 只 有 这 样 才 能 保证 应 用 的 羔 容 性 。 第 28 行使 用 了 save() 方 法 来 保存 刚 
刚 创建 的 Contact 对 象 ， 使 它 被 记录 到 手机 中 。 


展示 读者 可 以 自行 尝试 在 只 保存 了 name 属性 或 只 保存 了 displayname 时 ， 系 统 通讯 录 中 显示 
| 的 名 称 有 什么 区 别 ， 从 而 理解 手机 通讯 录 中 对 联系 人 名 称 的 保存 机 制 ， 这 对 真正 开发 一 


款 好 用 的 通讯 录 应 用 很 有 帮助 。 





联系 人 的 创建 、 读 取 、 修 改 和 删除 


在 范例 6-3 中 利用 Contact 对 象 创建 了 一 个 新 的 联系 人 ，Contact 除了 可 以 创建 一 个 联 
系 人 之 外 还 可 以 实现 对 联系 人 的 修改 、 删 除 和 复制 等 操作 。 本 节 将 以 一 个 例子 来 实现 这 些 
功能 。 

【范例 6-4】 联 系 人 的 创建 、 读 取 、 修 改 和 删除 。 


UL <tDOCTYPE ntnl> 

02 <html> 

03 <head> 

04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

05 <script src="cordova.js" type="text/javascript" charset="utf-8"></script> 


06 <script type="text/javascript" charset="utf-8"> 
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85 


Apache Cordova 移动 应 用 开发 实战 





不 直接 运行 程序 ， 先 对 代码 做 一 些 简单 地 分 析 。 

首先 要 做 的 依然 是 等 待 设 备 加 载 完 毕 ， 如 范例 第 9 行 所 示 。 当 设备 加 载 完 毕 之 后 ， 系 统 
会 自动 执行 自 定义 函数 onDeviceReady 。 在 此 处 由 于 确定 设备 已 经 被 完全 加 载 了 ， 就 可 以 开 
始 创 建 联系 人 了 。 本 例 首 先 创建 了 两 个 联系 人 ， 其 中 一 个 的 各 项 资料 都 是 与 Dog 有 关 的 ， 如 
第 13~21 行 所 示 ， 此 时 只 是 创建 了 一 个 Contact 对 象 ， 并 不 是 真正 地 将 数据 写 入 到 通讯 录 
中 。 因 此 需要 在 第 23 行使 用 save() 方 法 将 数据 写 入 到 通讯 录 中 。 

接 下 来 又 新 建 了 一 个 联系 人 ， 而 这 个 联系 人 都 是 与 Cat 有 关 的 ， 如 范例 第 25~33 行 所 
示 。 将 新 创建 的 联系 人 保存 为 contact2， 然 后 写 入 到 通讯 录 中 。 这 两 个 联系 人 保存 完毕 之 后 
都 会 在 回调 函数 onSaveSuccess 中 弹出 对 话 框 来 提示 联系 人 保存 成 功 。 

第 37 行使 用 clone() 方 法 来 对 contactl 〈 也 就 是 那个 各 项 资料 都 与 Dog 有 关 的 联系 人 ) 进 
行 了 一 次 复制 ， 将 它 的 所 有 信息 都 保存 到 了 名 为 clone 的 联系 人 对 象 中 ， 然 后 通过 remove() 
方法 对 contactl 进行 删除 。 

这 样 一 来 实际 上 最 终 通讯 录 中 只 剩 下 那 位 各 种 资料 都 与 Cat 有 关 的 联系 人 了 ， 那 么 接 下 
来 可 以 看 看 通讯 录 中 的 结果 是 不 是 这 样 的 ， 如 图 6-6 所 示 。 
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Set up my proflle 


Miao Miao 
;| 





6-6 运行 程序 之 后 的 通讯 录 


加 .与 《contactField 对 象 的 深入 研究 


在 学 习 Contact 对 象 的 属性 时 ， 有 不 止 一 个 属性 是 ContactField 类 型 的 变量 ， 那 么 
ContactField 类 究竟 是 什么 呢 ? 本 节 将 对 它 进 行 比较 深入 地 前 析 。 

ContactField 对 象 是 一 个 可 重用 的 组 件 ， 用 于 支持 通用 方式 下 的 联系 人 字段 ， 每 个 
ContactField 对 象 中 都 包含 了 一 个 值 属性 (value〉、 一 个 类 型 属性 (type〉 和 一 个 首选 项 属性 
(pref) 。 其 中 type 属性 是 一 个 字符 串 ， 用 来 对 该 对 象 的 类 型 进行 说 明 ， 比 如 说 它 的 值 可 以 
为 “这 是 一 个 电子 邮件 ”。value 属性 用 来 存放 具体 的 值 ， 依 然 以 邮件 为 例 ， 它 的 值 就 可 以 是 
123456(@sina.com。pref 是 一 个 布尔 型 变量 ， 它 包含 了 当前 用 户 的 首选 项 ， 默 认为 true。 

在 大 多 数 情况 下 ，ContactField 对 象 中 的 type 属性 并 不 会 是 事先 确定 值 。 例 如 ， 一 个 电 
话 号 码 的 type 属性 值 可 以 是 : home、work、mobile、iPhone 或 其 他 相应 特定 设备 平台 的 联系 
人 数据 库 所 支持 的 值 。 然 而 对 于 Contact 对 象 的 photos 字段 ，Cordova 使 用 type 字段 来 表示 
返回 的 图 像 格式 。 如 果 value 属性 包含 的 是 一 个 指 回 照片 图 像 的 URL，Cordova 对 于 type 会 
返回 url; 如 果 value 属性 包含 的 是 图 像 的 Base64 编码 字符 串 ，Cordova 对 于 type 会 返回 
base64。 

范例 6-5 是 一 个 使 用 ContactField 对 象 的 例子 。 

【范例 6-5】 使 用 ContactField 对 象 。 
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第 6 章 通讯 录 信 息 的 获取 





在 Contact 对 象 中 ， 电 话 号 码 (phoneNumbers) 就 是 一 个 ContactField 类 的 数组 对 象 ， 范 
例 13 行将 电话 号 码 声 明成 了 一 个 数组 。 在 第 14~17 行为 数组 中 的 对 象 赋值 ， 然 后 在 第 34~36 
行 通过 alert() 函 数 将 它们 显示 出 来 ， 运 行 结果 如 图 6-7 所 示 。 





图 6-7 显示 电话 号 码 的 各 个 属性 值 


可 以 看 到 ， 被 消息 框 弹出 的 内 容 与 最 初 在 程序 中 输入 的 内 容 是 对 应 的 ， 使 用 这 样 的 方法 
能 够 保证 在 安 卓 自 带 通讯 录 中 项 目 不 足 时 为 用 户 提供 额外 的 数据 保存 选项 。 
| 





us 网。 某 些 系 统 中 不 支持 ContactField 类 型 的 首选 项 属性 ， 因 此 该 值 在 安 卓 、 黑 莓 以 及 iOS 设 

一 备 下 永远 为 false。 事 实 上 笔者 认为 在 安 卓 通讯 录 中 的 许多 字段 对 普通 用 户 来 说 实在 是 有 
些 过 于 烦 歼 了 ， 虽 然 这 些 内 容 有 助 于 保证 满足 所 有 人 的 需求 ， 但 是 作为 开发 者 就 需要 在 
这 方面 下 一 些 功夫 。 这 在 一 定 程度 上 也 能 够 解释 为 什么 在 智能 机 横行 的 今天 ， 许 多 用 户 
开始 愿意 购买 一 款 像 诺 基 亚 1050 这 样 的 功能 机 来 使 用 。 


6.6 小 结 


本 章 学 习 了 利用 Cordova 对 设备 的 联系 人 信息 进行 修改 和 得 看 的 方法 。 通 过 这 些 方法 可 
以 帮助 用 户 实现 一 些 非常 有 用 的 改 民 。 读 者 要 注意 在 原生 安 早 通讯 录 中 的 一 些 信息 〈 比 如 地 
址 、 邮 编 ， 还 有 国外 用 户 习惯 的 将 姓 和 名 分 开 存 储 的 方法 ) 实际 上 都 是 不 太 适 合 中 国人 使 用 
习惯 的 ， 这 时 就 可 以 利用 本 章 所 介绍 的 内 容 来 制作 一 球 更 适合 国内 用 户 的 通讯 录 软 件 。 
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本 章 将 介绍 Cordova 中 消息 提示 的 方法 ， 在 之 前 的 内 容 中 为 了 显示 一 些 信 息 ， 通 常 使 用 
JavaScript 中 的 alert() 方 法 或 是 将 信息 在 LogCat 中 显示 。 这 虽然 不 失 为 一 种 不 错 的 方法 ， 但 显 
然 无 法 满足 实际 项 目 中 的 需要 。 本 章 要 介绍 的 notification 类 就 能 很 好 地 解决 这 一 需求 。 
Cordova 的 notification 类 封装 了 一 系列 设备 视觉 、 听 觉 和 触觉 的 通知 ， 可 以 为 应 用 定制 专门 的 
消息 推送 、 和 警告 或 提示 。 本 章 还 将 举例 介绍 Cordova 中 每 一 种 消息 通知 可 以 使 用 的 场景 ， 以 
便 使 读者 能 够 在 实际 开发 中 得 心 应 手 。 








本 章 的 主要 知识 点 有 : 


利用 notification.alert() 弹 出 一 个 警告 或 者 对 话 框 。 

利用 notification.confirm() 显 示 一 个 可 定制 的 确认 对 话 框 。 

利用 notification.prompt() 弹 出 一 个 对 话 框 。 

利用 notification.beepO 控 制 蜂 鸣 器 使 设备 发 出 蜂 鸣 声 。 

利用 notification.vibrate(O) 控 制 产生 一 定时 长 的 震动 。 

notification 类 中 每 种 方法 使 用 的 场合 以 及 各 种 方法 可 能 出 现 的 bug。 


A notification 警告 的 使 用 


notification.alert(O) 方 法 可 以 使 设备 弹出 一 个 可 以 自 定 义 的 对 话 框 ， 之 前 这 样 的 功能 主要 依 
靠 JavaScript 中 的 alert0 方 法 来 实现 。 与 alert0 方 法 相 比 ， 显 然 notification.alert() 具 有 更 加 强 
大 的 可 定制 性 与 易 用 性 ， 范 例 7-1 是 它 的 一 个 例子 。 
首先 需要 在 命令 行 执行 命令 添加 插件 : cordova plugin add cordova-plugin-dialogs 
【范例 7-1】 使 用 notification.alert() 方 法 显示 警告 。 





第 7 章 Cordova 的 消息 提示 





运行 结果 分 别 如 图 7-1 和 图 7-2 所 示 。 


index.html 


这 是 一 个 标题 
这 是 使 用 notification.alert() 方 法 显示 营 
设备 加 慌 完 毕 告 


OK 我 就 不 说 这 个 按钮 是 可 以 自 定义 的 





7-1 使 用 JavaScript 的 alert(0) 方 法 显示 对 话 框 7-2 使 用 notification 显示 一 个 自 定义 的 对 话 框 


可 以 看 到 ， 使 用 两 种 方法 显示 出 的 对 话 框 在 样式 上 有 一 定 的 区 别 ， 而 且 使 用 notification 
类 产生 的 对 话 框 具有 更 强大 的 自由 上 度 ， 比 如 可 以 目 定 义 对 话 框 的 标题 、 按 钮 等 的 内 容 。 除 此 
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之 外 ， 观 察 范例 第 20~25 行 ， 很 明显 notification 中 的 alert() 方 法 还 具有 方便 调用 的 回调 函 
数 ， 这 也 是 它 要 比 原生 JavaScript 中 的 alert(0 方 法 更 加 方便 的 原因 之 一 。 

范例 第 20~25 行 就 是 notification.alert() 方 法 的 使 用 ， 它 有 4 个 参数 ， 分 别 是 对 话 框 的 内 
容 、 回 调 函 数 、 对 话 框 的 标题 和 对 话 框 按钮 的 标题 。 


3 品 。 在 大 多 数 平台 中 ，notification alert() 与 alert0 方 法 将 会 显示 为 与 原生 SDK 相同 的 对 话 框 样 
式 ， 但 是 在 少数 低 版 本 平台 中 ， 如 塞 班 则 会 显示 成 浏览 器 中 对 话 框 的 样式 。 如 在 图 7-1 
中 使 用 alert() 方 法 所 显示 出 的 对 话 框 就 是 浏览 器 中 默认 的 对 话 框 样式 ， 可 以 看 出 与 图 7-2 
中 的 对 话 框 有 明显 的 区 别 。 但 是 在 比较 新 的 版 本 中 ， 无 论 采 用 哪 种 方式 显示 出 的 对 话 杠 
都 是 一 样 的 。 





7 .2 notification 确认 对 话 框 的 使 用 


除了 alert0 之 外 ，notification 类 还 提供 了 confirm0O 对 话 框 ， 使 用 方法 与 notification.alert() 
非常 类 似 ， 范 例 7-2 是 使 用 它 弹 出 对 话 框 的 一 个 例子 。 
【范例 7-2】 使 用 confirm() 方 法 弹出 对 话 框 。 
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编译 运行 之 后 ， 点 击 屏 幕 上 方 的 “显示 对 话 框 ”弹出 对 话 框 (如 图 7-3 所 示 ) ， 当 点 击 
对 话 框 中 的 按钮 后 运行 回调 函数 onConfirm()， 弹 出 一 个 新 的 对 话 框 如 图 7-4 所 示 。 





index.html 
单 击 按钮 后 运行 回调 函数 


是 一 个 标题 
这 是 使 用 notification.confirml ) 方 法 显示 
对 话 框 


OK 


这 个 按钮 也 是 可 以 自 定义 的 





图 7-3 弹出 确认 对 话 框 图 7-4 触发 回调 函数 弹出 新 的 对 话 框 


范例 第 22~27 行 是 Cordova 中 使 用 confirm() 方 法 的 一 个 例子 ， 该 方法 仍然 使 用 了 回调 函 
数 ， 但 是 值得 注意 的 是 ， 在 confirm0) 方 法 中 ， 当 用 户 点 击 了 对 话 框 中 的 按钮 后 才 执 行 回调 函 
数 ， 这 与 上 一 节 中 的 alert0 方 法 有 所 区 别 。 

这 种 方法 的 使 用 非常 有 意义 ， 因 为 在 Cordova 中 默认 的 对 话 框 只 能 起 到 提醒 的 作用 ， 但 
是 无 论 用 户 确 认 与 否 系 统 都 会 默认 按照 原 定 的 计划 执行 。 这 有 一 种 先 斩 后 奏 的 味道 ， 很 有 可 
能 会 引起 茶 些 用 户 的 反感 ， 如 果 使 用 了 这 种 具有 确定 功能 的 对 话 框 ， 则 可 以 避免 此 类 现象 的 
发 生 。 
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7 notification 显示 可 以 传递 变量 的 对 话 框 


经 过 前 和 看 两 节 的 学 习 已 经 了 解 了 在 Cordova 中 使 用 对 话 框 的 方法 ， 不 过 显然 它们 还 不 能 
够 满足 实际 开发 中 对 于 对 话 框 的 要 求 。 比 如 经 常 需要 通过 对 话 框 来 传递 一 些 数值 或 用 来 表示 
用 户 是 确定 还 是 取消 的 选择 结果 ， 这 时 就 需要 一 种 更 加 强大 的 对 话 框 。 这 样 的 需求 可 以 徘 
notification 类 中 的 prompt(O 方 法 来 实现 。 
【范例 7-3】 利 用 notification.prompt0 方 法 实现 更 高 级 的 对 话 框 。 
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编 详 之 后 运行 结果 如 图 7-5 所 示 ， 在 纤 框 中 输入 数字 1， 并 选择 “要 ”之 后 ， 得 到 如 
图 7-6 所 示 的 界面 ， 显 示 用 户 需 要 1 杯 咖啡 ,显然 用 户 的 选择 确实 通过 对 话 框 传递 给 了 应 用 。 


M 卡 全 午 7:58 


将 想 要 的 数量 输入 在 对 话 框 内 
请 问 你 需要 喝 杯 咖 哇 么 ? 


1 





index.html 
你 要 了 1 杯 嘲 上 啡 





OK 











| 加 | 二 | 3 
| | 

OO © oo ND 
CD 


空格 








7-5 输入 数字 通知 系统 7-6 用户 输 入 的 数字 将 会 通过 对 话 框 传递 给 系统 
范例 第 25~30 行 是 使 用 notification.prompt0 方 法 的 一 个 例子 ， 与 之 前 学 过 的 两 种 对 话 框 
也 非常 相似 ， 但 是 在 第 4 个 参数 (也 就 是 第 29 行 ) 又 与 之 前 有 一 些 区 别 。 在 prompt0 方 法 的 
第 4 个 参数 中 ， 用 方 插 号 插 起 对 话 框 按钮 的 多 个 标题 ， 并 用 逗号 分 开 。 


[后 二 网 虽然 在 prompt0 方 法 中 可 以 支持 使 对 话 框 超过 三 个 按钮 选项 ， 但 是 当 标 题 超过 三 个 时 就 
只 会 显示 前 三 个 标题 。 





范例 第 16 行 定义 了 回调 函数 onPrompt()， 其 中 的 result 类 封装 了 对 话 框 中 提交 的 值 ， 
results.buttonIndex 中 存储 的 是 对 话 框 中 各 个 按键 的 索引 ，results.inputl 中 存放 了 用 户 在 编辑 
框 中 输入 的 文本 。 

本 节 介 绍 的 这 种 功能 看 似 非常 实用 ， 但 是 由 于 弹出 对 话 框 的 样式 过 于 死板 ， 比 如 仅 能 文 
持 一 个 输入 栏 而 不 能 采用 更 加 适合 用 户 使 用 的 下 拉 列 表 等 形式 ， 因 此 在 实际 开发 中 常 第 使 用 
精心 制作 的 jQuery 插件 来 实现 类 似 的 需求 。 
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7 人 notification 控制 蜂 鸣 器 和 震动 


前 向 已 经 介绍 了 三 种 使 用 notification 类 创建 和 使 用 对 话 框 的 方法 ， 除 了 利用 对 话 框 从 视 
觉 上 对 用 户 进行 提示 之 外 ， 还 可 以 依靠 beep() 方 法 和 vibrate() 方 法 操纵 设备 发 出 蜂 鸣 声 和 震 
动 。 范 例 7-4 是 使 用 这 两 种 方法 的 一 个 例子 。 

【范例 7-4】 使 用 notification 类 操纵 蜂 鸣 器 和 震动 。 
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模 是 走 | 在 最 新 版 本 的 cordova 项 目 中 如 果 需 要 调用 navigator.notification.vibrate() 需 要 在 项 目 中 添 
| ”加 插件 cordova-plugin-vibration。 





运行 后 分 别 点 击 “ 显 示 对 话 框 ”“ 峰 鸣 器 发 声 ”“ 使 设备 震动 ”可 以 分 别 弹出 对 话 框 、 
使 蜂 鸣 器 发 出 三 次 声音 、 使 设备 震动 2s。 

第 25 行 是 Cordova 中 利用 notification.beep() 方 法 调用 蜂 鸣 器 的 例子 ， 其 中 的 参数 代表 了 
蜂 叹 器 发 出 声音 的 次 数 ， 第 29 行 利用 notification.vibrate() 方 法 使 设备 震动 ， 其 中 的 参数 是 使 
设备 连续 震动 的 时 间 ， 单 位 为 ms。 

至 此 notification 类 中 的 各 种 方法 就 介绍 完了 ， 但 这 仅仅 是 开始 ， 最 重要 的 还 是 理解 它们 
之 间 的 优 劣 关系 ， 以 便 能 够 在 合适 的 地 方 使 用 合适 的 方法 来 达到 完美 的 用 户 体验 。 

首先 将 各 种 对 话 框 归 为 一 类 ， 由 于 当 对 话 框 被 弹出 时 ， 应 用 将 被 暂时 置 为 不 可 用 ， 会 对 
用 户 的 使 用 造成 打 断 的 效果 ， 且 用 户 不 得 不 对 该 提示 做 出 回应 ， 因 此 对 话 框 一 般 用 来 作为 一 
些 重要 信息 的 提示 使 用 。 比 如 游戏 中 可 以 在 系统 电量 较 低 时 使 用 对 话 框 来 提醒 用 户 及 时 元 
电 ， 或 者 在 用 户 要 退出 应 用 时 来 铝 用 户 确 认 是 否 为 误 操 作 。 男 外 ， 在 用 户 执 行 一 些 会 影响 到 
系统 的 操作 《比如 删除 文件 、 删 除 联系 人 等 ) 时 也 需要 弹出 对 话 框 来 让 用 户 确 认 。 

由 于 蜂 鸣 器 和 震动 可 以 被 用 户主 动 忽略 ， 因 此 主要 用 来 增强 应 用 的 交互 性 ， 比 如 一 款 新 
闻 浏 览 应 用 可 以 在 有 新 闻 时 利用 蜂 鸣 需 来 提醒 用 户 ， 而 一 些小 游戏 也 可 以 利用 震动 来 增强 用 
户 的 游戏 体验 ， 比 如 当 用 户 操 纵 的 人 物 死 亡 时 设备 震动 表示 处 神 。 蜂 鸣 器 和 震动 也 可 以 与 对 
话 框 搭配 使 用 。 

蜂 鸣 器 与 震动 之 间 也 有 一 定 的 区 别 ， 蜂 鸣 占 的 声音 过 于 单调 ， 因 此 在 许多 环境 下 难以 适 
应 用 户 体验 的 需求 ， 比 如 用 户 点 击 屏幕 时 可 以 采用 一 个 几 毫 秒 的 震动 来 作为 回 饶 ， 但 是 如 果 
利用 蜂 鸣 器 来 作为 反馈 就 会 让 用 户 感 到 心烦 ， 因 此 在 实际 开发 中 一 定 要 慎重 选择 。 


/. = 小 结 


本 章 主 要 学 习 了 利用 notification 类 中 的 各 种 方法 来 实现 对 用 户 的 各 种 反馈 ， 其 中 包括 了 
对 话 框 、 蜂 鸣 嚣 和 宕 动 。 这 些 方 法 对 提升 一 球 应 用 的 交互 性 会 起 到 非常 重要 的 作用 。 除 此 之 
外 ， 这 些 反 馈 的 方法 还 可 以 使 开发 者 更 好 地 实现 对 应 用 的 调试 ， 比 如 可 以 利用 prompt0 来 中 
断 程 序 并 修改 茶 个 变量 的 值 ， 这 些 都 极 大 地 方便 了 Cordova 开发 人 员 。 
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本 章 将 介绍 Cordova 中 使 用 加 速度 传感器 获取 数据 的 方法 。 加 速度 传感器 是 一 种 用 来 检 
测 物体 相对 运动 方向 以 及 沿 着 x、y、z 三 个 方向 运动 的 部 件 ， 现 代 的 智能 手机 绝 大 多 数 都 集 
成 了 加 速度 传感器 。Cordova 提供 了 accelerometer 类 用 来 接收 来 自 加 速度 传感器 的 数据 ， 从 而 
可 以 检测 到 设备 在 空间 上 的 位 置 变 化 。 





本 章 的 主要 知识 点 有 : 


@ 如 何 获取 设备 在 各 个 方向 上 的 加 速度 。 

如 何 按照 一 定 的 时 间 间 隔 获 取 设 备 在 各 个 方向 上 的 加 速度 。 
在 特定 的 时 间 获 取 设 备 在 各 个 方向 上 的 加 速度 。 

如 何 处 理 获取 到 的 加 速度 数据 。 


号 . 1 。 获取 当前 的 加 速度 


在 Cordova 中 ， 类 accelerometer 封装 了 专门 用 来 获取 设备 加 速度 的 方法 ， 其 中 最 基础 的 
一 个 方法 就 是 getCurrentAcceleration()。accelerometer.getCurrentAcceleration() 的 作用 是 获得 设 
备 当 前 《〈 即 该 方法 被 调用 时 ) 的 相对 运动 方向 ， 范 例 8-1 展示 了 该 方法 的 使 用 。 

首先 在 命令 行 执行 命令 添加 插件 : cordova plugin add cordova-plugin-device-motion。 

【范例 8-1】 使 用 accelerometer.getCurrentAcceleration() 获 取 设 备 当前 运动 信息 。 








运行 后 点 击 屏 人 费 上 的 “获取 设备 运动 信息 ”字样 ， 可 以 弹出 如 图 8-1 所 示 的 对 话 框 ， 分 
别 显 示 设 备 在 x、y、z 三 个 方向 上 的 加 速度 以 及 测试 加 速度 的 时 间 戳 。 


index.html 
Acceleration X: 
Acceleration Y: 6.115532684326173 
Acceleration Z: 78856018065406265 
Timestamp: 1480855712568.115 


OK 





8-1 显示 当前 设备 的 加 速度 信息 


许多 虚拟 机 不 支持 加 速度 传感器 ， 因 此 会 弹出 显示 onError 的 对 话 框 ， 因 此 要 尽量 在 真 机 





上 进行 调试 。 如 图 8-2 就 是 笔者 在 虚拟 机 上 运行 的 结果 。 


范例 第 17 行 是 系统 使 用 accelerometer.getCurrentAcceleration() 方 法 获取 设备 的 当前 运动 
信息 ， 它 有 两 个 参数 ， 分 别 是 两 个 自 定义 函数 的 函数 名 。 第 一 个 函数 在 获取 信息 成 功 后 被 调 
用 ， 同 时 还 会 接收 到 一 个 acceleration 对 象 ， 此 对 象 中 封装 了 与 加 速度 有 关 的 信息 ， 分 别 是 设 
备 在 各 个 方向 上 的 加 速度 以 及 当前 的 时 间 惟 。 第 二 个 函数 在 获取 设备 信息 失败 时 被 调用 ， 比 
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如 第 26~29 行 的 onErrorO 函 数 就 用 来 反馈 获取 设备 加 速度 信息 失败 的 消息 。 





8-2 在 虚拟 机 中 弹出 失败 错误 信息 


写 . 2 监视 设备 的 加 速度 


上 一 节 学 习 了 利用 getCurrentAcceleration() 方 法 获取 设备 当前 加 速度 的 方法 。 也 许 有 读者 
己 经 想到 了 它 的 一 些 作 用 ， 比 如 可 以 用 来 记录 用 户 每 天 的 运动 量 ， 但 这 就 遇 到 了 一 个 问题 。 
如 果 要 记录 用 户 每 天 的 运动 量 就 需要 不 断 地 调用 getCurrentAcceleration() 方 法 来 进行 计算 ， 虽 
然 可 行 ， 但 这 无 疑 十 分 麻烦 。 有 没有 更 好 的 方法 呢 ? 

Cordova 作为 一 款 比 较 完 善 的 路 平台 开发 框架 上 和 目 然 有 过 这 方面 的 考虑 ， 封 装 在 类 
accelerometer 中 的 watchAcceleration() 无 疑 比 利用 JavaScript 不 断 去 调用 
getCurrentAcceleration() 要 方便 得 多 。 范 例 8-2 是 使 用 watchAcceleration() 方 法 监视 手机 加 速度 
变化 的 一 个 例子 。 

【范例 8-2】 利 用 accelerometerwatchAcceleration() 方 法 监视 设备 的 加 速度 变化 。 
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运行 之 后 点 击 屏幕 上 的 “获取 设备 运动 信息 ”字样 ， 然 后 用 手 不 断 地 哆 动手 机 使 之 发 生 
位 移 ， 可 以 看 到 屏幕 上 的 数据 不 断 变化 。 获 取 一 些 加 速度 信息 后 再 点 击 “停止 获取 设备 运动 
信息 ”的 字样 ， 屏 幕 中 的 数据 将 不 再 变化 。 运 行 后 结果 如 图 8-3 所 示 。 


四 照片 全 下 午 9:55 = 


获取 设备 运动 信息 


停止 获取 设备 运动 信 
息 


x: -1.753154296875y: 2.702480163574219z: 
9.345665588378907Time: 
1480859672352.759x: 6.544989624023438y: 
2.329156494140625z: 
10.14754806518555Time: 
1480859682367.832x: -3.889362030029297y: 
-0.8713380432128907z: 
19.72403366088867Time: 
1480859692371.883x: 2.916535034179688y: 
1.870959320068359z: 7.903564453125Time: 
1480859702367.74 


8-3 监视 设备 的 加 速度 变化 


由 于 本 节 重 点 讲解 基础 知识 ， 不 涉及 CSS 样式 问题 ， 因 此 界面 会 比较 混乱 。 





阅读 范例 中 的 代码 ， 第 16~20 行 声 明了 一 个 函数 startWatch()， 第 19 行使 用 了 
watchAcceleration() 方 法 来 监视 设备 的 加 速度 变化 情况 。 观 察 该 函数 可 以 发 现 ， 除 了 
onSuccess 和 onError 之 外 ， 它 比 getCurrentAcceleration() 方 法 还 多 了 一 个 参数 option， 该 参数 
用 来 设置 每 次 监控 设备 加 速度 信息 的 时 间 间 隔 ， 以 训 秒 为 单位 ， 本 范例 中 就 设置 为 每 0.3s 获 
取 一 次 加 速度 信息 〈 第 18 行 ) 。 

在 onSuccess 国 数 中 ，acceleration 类 的 用 法 与 上 面 介 绍 的 完全 一 样 ， 但 在 36~39 行 中 使 
用 了 JavaScript 中 的 DOM 方法 将 获取 到 的 信息 显示 到 页 面 上 。 

除 此 之 外 可 以 看 到 ， 在 本 例 中 还 多 了 一 个 自 定 义 的 stopWatch() 方 法 ， 它 的 作用 是 调用 
clearWatch() 方 法 来 停止 对 设备 加 速 的 监听 ， 这 样 就 保证 了 用 户 可 以 决定 在 什么 时 候 开 始 和 停 
止 监听 设备 的 运动 情况 。 依 然 拿 记录 用 户 的 运动 量 来 举例 。 如 果 没 有 clearWatch() 方 法 ， 那 么 
手机 将 会 记录 任何 时 刻 用 户 的 总 运动 量 ， 但 是 有 了 clearWatch() 方 法 之 后 ， 用 户 就 可 以 自行 决 
定 在 什么 时 候 要 对 自己 的 运动 量 进行 计算 ， 比 如 可 以 计算 用 户 在 一 个 小 时 内 的 运动 量 。 

另外 观察 图 8-3 中 Time 值 的 变化 情况 ， 可 以 发 现 每 显示 一 条 数据 ， 时 间 惟 增 大 的 数字 大 
约 为 10000， 可 见 该 时 间 戳 记录 的 单位 为 野 秒 (ms) ， 用 来 记录 设备 已 经 使 用 的 总 时 间 。 
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可 以 暂停 监控 一 段 时 间 再 重新 开始 监控 ， 然 后 观察 时 间 惟 的 变化 来 验证 。 有 兴趣 的 读者 
也 可 以 根据 该 值 来 计算 笔者 写本 节 内 容 所 花费 的 时 间 。 





己 e 3 详解 acceleration 对 象 


在 之 前 的 例子 中 曾经 多 次 使 用 到 acceleration 对 象 ， 可 是 acceleration 对 象 究竟 是 什么 
呢 ? 相信 不 少 读者 并 没有 真正 明白 。 本 节 将 深入 前 析 acceleration 对 象 以 及 它 的 各 个 属性 。 

acceleration 对 象 中 封装 了 由 watchAcceleration() 方 法 或 getCurrentAcceleration() 方 法 获取 
的 数据 ， 其 中 包括 了 4 个 属性 ， 分 别 是 x、y、z 和 timestamp。 其 中 x、y、z 分 别 保存 了 设备 
在 x、y、z 三 个 方向 上 的 加 速度 ， 单 位 是 米 /二 次 方 秒 (m/s*) 。 另 外 ， 由 于 设备 还 受到 重力 
的 影响 ， 所 以 当 设 备 被 安静 地 放 在 某 个 地 方 静 止 不 动 时 ， 获 取 的 加 速度 应 为 x=0、y=0 和 
z=9.81， 其 中 9.81 为 地 表 的 重力 加 速度 。 


这 里 要 介绍 一 下 平时 常 说 的 重力 感应 功能 是 怎样 实现 的 。 由 于 当 手 机 平 放 静 止 时 ， 仅 有 
Z 方向 受到 重力 ， 而 X、y 方向 的 重力 加 速度 均 为 0。 但 是 当 手 机 发 生 倾斜 时 ， 就 变 成 了 


由 三 个 方向 合成 重力 加 速度 ， 即 x、y、z 三 个 方向 的 平方 和 为 9.81 的 平方 。 通 过 测量 每 
个 方向 的 重力 加 速度 就 可 以 得 到 手机 倾斜 的 角度 了 。 





另外 ， 由 于 设备 获取 的 往往 是 一 瞬间 的 加 速 ， 因 此 在 使 用 获取 的 加 速 数 据 时 还 需要 对 这 
些 数 据 进行 一 些 处 理 ， 以 免 操 作 过 于 突 元 。 比 如 读者 一 定 都 遇 到 过 这 样 的 问题 ， 测 量 一 包 大 
米 的 重量 ， 为 了 保证 精确 需要 测量 多 次 求 平均 值 。 但 是 假如 测量 了 4 次 的 数据 分 别 是 0.5kg、 
0.5kg、0.55kg 和 100 斤 ， 那 么 显然 100 斤 是 错误 的 。 所 以 最 终 要 对 0.5kg、0.5kg 和 0.55kg 求 
平均 值 。 在 实际 开发 中 也 是 这 样 ， 假 如 x 方向 以 100ms 为 间隔 监控 x 方向 的 加 速度 分 别 为 
1、1、1、140.5、1， 那 么 就 需要 考虑 一 下 这 个 10.5 要 怎么 处 理 了 。 


号 ,A 加 速度 传感器 的 使 用 


前 面 几 节 已 经 介绍 了 获取 设备 加 速度 信息 的 方法 ， 本 节 再 来 介绍 一 些 加 速度 传感器 适用 
的 场合 。 


8.4.1 游戏 

这 个 应 该 是 首先 能 想到 的 了 ， 像 比较 经 典 的 极品 飞车 17 就 采用 了 加 速度 传感器 《如 图 
8-4 所 示 ) ， 利 用 手机 左右 摇摆 产生 的 加 速度 来 控制 车 辆 前 行 的 方向 。 另 外 还 有 一 些 飞 行 射 
击 游戏 也 是 利用 了 类 似 的 方法 ， 比 如 《钢铁 侠 》 系 列 游 戏 就 是 利用 手机 的 左右 摇摆 来 控制 人 
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物 躲 避 迎 面 飞 来 的 武器 ， 还 有 一 些 跑 酷 游 戏 (如 神 庙 逃亡 ) 也 是 如 此 。 

另外 一 类 游戏 就 是 迷宫 ， 可 以 利用 手机 的 倾斜 来 控制 小 球 四 处 转动 最 终 逃 出 迷宫 。 
由 此 可 见 加 速度 传感器 应 用 在 游戏 中 一 般 用 来 操纵 主角 进行 移动 ， 这 样 也 比较 符合 用 户 
的 思维 习惯 。 


相信 不 少 读者 都 玩 过 老式 的 手柄 游戏 ， 在 主角 进行 跳跃 时 不 少 人 的 身体 都 会 随 着 跳跃 的 


方向 进行 倾斜 也 是 类 似 的 道理 。 








图 8-4 极品 飞车 17 的 游戏 画面 


8.4.2 ”抽奖 

加 速度 传感器 的 作用 就 是 获取 设备 的 空间 变化 信息 ， 那 么 设备 的 摇动 自然 会 有 足够 的 数 
据 变化 ， 而 晃动 手机 的 动作 也 容易 让 用 户 联想 到 抽签 或 者 抓 阁 时 的 志 下 心情， 因此 一 些 应 用 
采用 了 加 速度 传感器 来 模拟 用 户 抽奖 的 行为 。 此 外 微 信 等 社交 应 用 的 “ 摇 一 摇 ” 功 能 也 是 模 
拟 了 用 户 的 这 一 思维 习惯 。 


8.4.3 更 多 更 强大 的 交互 

实际 上 仍然 是 依靠 加 速度 传感器 的 变化 来 实现 对 设备 的 操纵 ， 但 是 范围 要 更 广 一 些 。 比 
如 一 些 手机 防 丢 的 应 用 会 在 加 速度 较 大 的 时 候 发 出 警报 ， 或 者 是 在 用 户 握 住 手机 做 甩 鞭 子 动 
作 时 ， 发 出 鞭子 抽打 身体 的 声音 ， 这 些 都 是 使 用 加 速度 传感器 的 例子 。 


实战 : 制作 “马上 有 一 切 ” 的 动画 


以 上 介绍 了 加 速度 传感器 可 以 使 用 的 场合 ， 本 节 将 以 一 个 简单 的 例子 来 实现 一 坎 “ 拜 
年 ”的 应 用 : 马上 有 一 切 。 

2014 年 是 马 年 ， 于 是 马 这 种 生物 一 下 子 就 变 成 了 人 民 和 群众 喜闻乐见 的 吉祥 物 ， 无 所 不 能 
的 网 友 们 借 着 这 一 契机 ， 发 明了 许多 有 意思 的 图 画 ， 比 如 “马上 有 房 ”( 见 图 8-5) 、“ 马 
上 有 车 ”， 其 至 是 “马上 有 对 象 ”( 见 图 8-6) 等 。 笔 者 就 有 了 一 个 想法 ， 可 以 此 为 题材 做 
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图 8-5 “马上 有 房子 ”图 片 图 8-6 “马上 有 对 象 ” 图片 


8.5.1 原形 设计 

笔者 希望 在 手机 屏 磋 上 显示 出 一 个 卡通 马 的 造型 ， 马 背 朝 问 屏 帮 的 右上 方 ， 马 背 顶 部 为 
空白 。 当 用 户 摇 晃 手 机 时 ， 马 背 上 方 的 空白 随机 显示 出 房子 、 钱 、 汽 车 图 案 。 为 了 衬托 过 年 
的 研 庆 气氛 还 要 将 背景 改 为 红色 ， 如 图 8-7 所 示 。 


此 处 显示 房子 、 
钱 、 汽 车 图 案 


此 处 显示 一 个 卡 
ES 


此 处 显示 与 图 案 对 应 的 贺词 





8-7 ”界面 设计 


最 初 ， 屏 幕 上 只 显示 中 间 的 卡通 马 图 案 ， 当 用 户 反 晃 手机 后 ， 随 机 以 渐 显 的 形式 显示 出 
钱 、 房 子 或 汽车 的 图 案 ， 再 在 屏 医 的 下 方 显示 相应 的 文字 :“ 马 上 有 钱 / 房 /车 ”。 


8.5.2 ”素材 准备 


在 理 清 思路 之 后 就 开始 准备 素材 了 ， 本 项 目 需要 4 张 图 片 ， 内 容 依 次 为 马 、 钱 、 汽 车 、 
房子 ， 如 图 8-8~ 图 8-11 所 示 。 
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图 8-8 素材 “ 马 ” 图 8-9 素材 “ 钱 ” 





图 8-10 素材 “汽车 ” 图 8-11 素材 “房子 ” 


钱 、 汽 车 和 房子 的 素材 笔者 只 截取 了 整个 素材 的 一 部 分 ， 实 际 上 它们 的 素材 图 片 太 寸 与 


素材 “ 马 ” 的 图 片 尺寸 是 相同 的 ， 这 样 摆 它 们 和 马 之 间 的 位 置 保持 背景 透明 。 只 要 让 它 
们 的 位 置 重 一 就 可 以 实现 在 马 背 上 的 效果 了 。 





8.5.3 动画 实现 
在 Cordova 中 新 建 一 个 文件 来， 命名 为 images， 其 中 放置 这 4 张 图 片 ， 目 录 如 图 8-12 所 示 。 


4 [加 helloword 


4 EE images 
喇 | che.png 
喇 ( fang.png 
WW ma.png 
号 | qian.png 
> js 


De 


» 也 gen [Generated Java Files] 
》 包 libs 
》 包 res 
b a src 

内 .classpath 

四 ,project 

回 AndroidManifestxml 
辆 | 'c_launcher-web.png 
proguard-project,txt 


图 8-12 新 建 的 图 片 目 录 
使 用 生成 1~3 的 随机 数 来 决定 以 渐 显 的 方式 显示 某 一 图 片 的 代码 ， 如 范例 8-3 所 示 。 
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【范例 8-3 】 随 机 显示 图 片 。 
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74 </head> 

15 <body> 

76 <div class="rec" id="rec"> 

| <div class="img" id="img"></div> 
78 </div> 

79 <hl id="heci"></h1> 

80 </body> 

81 </html> 


编 详 之 后 运行 结果 如 图 8-13 所 示 ， 马 背 上 源 渐 出 现 了 一 个 大 大 的 “金币 ”， 并 在 底部 显 
示 金 黄色 的 大 字 “ 马 上 有 钱 ”。 





图 8-13 ”屏幕 上 显示 “马上 有 钱 ” 


范例 第 76~78 行 用 来 显示 屏幕 上 图 片 的 页 面 元 系 ， 其 中 id 为 rec 的 元 素 用 来 显示 的 部 的 
卡通 马 造 型 。 在 其 上 方 履 凋 了 一 块 与 它 大 小 完全 相同 的 元 素 ，id 为 img 的 元 素 用 来 显示 钱 、 
房子 或 者 车 的 图 案 。 在 准备 系 材 时 ， 不 管 是 马 还 是 其 他 图 案 ， 背 景 都 是 透明 的 ， 所 以 相互 胜 
挡 之 后 就 能 够 形成 有 东西 放置 在 马 背 上 的 感觉 了 。 

之 后 要 做 的 就 是 让 图 片 以 潮 显 的 形式 显示 了 ， 虽 然 jQuery 中 有 现成 的 渐 显 渐 隐 函 数 可 以 
使 用 ， 但 是 本 范例 还 是 使 用 原生 的 JavaScript。 通 过 setInterval() 函 数控 制图 片 的 透明 上 度 达 到 
渐 显 的 目的 《如 范 例 第 27 行 所 示 ) 。 

setIntervalO 以 50ms 为 间 隅 调用 了 目 定 义 图 数 opa_change(0 来 实现 对 图 片 透 明度 的 控制 

(范例 第 29~40 行 ) 。 其 中 变量 ipoa 用 来 存放 图 片 透明 度 的 具体 数值 ， 当 该 值 为 1 时 图 像 完 
全 显示 ， 系 统 调用 函数 clearInterval() 来 结束 计数 占 的 使 用 。 为 了 配合 这 一 过 程 在 设 定 img 元 
素 的 样式 时 就 已 经 将 它 的 透明 度 设 置 为 0， 如 范例 第 71 行 所 示 。 


本 例 在 第 9 行 初 始 化 了 变量 ipoa 的 值 为 0。 由 于 变量 作用 域 的 限制 ， 如 条 在 函数 
onDeviceReady() 中 使 用 将 会 导致 ipoa 被 系统 判定 为 局 部 变量 而 无 法 使 用 。 因 此 在 定义 全 


局 变量 时 一 定 不 要 将 它 声明 在 函数 中 。 另 外 ， 由 于 CSS 样式 的 继承 效果 ， 如 果 给 rec 元 
素 加 入 透明 属性 ， 那 么 其 内 部 的 img 元 素 也 会 跟着 透明 ， 因 此 该 属性 只 能 赋 给 处 于 顶层 
的 img 元 素 使 用 。 





109 





Apache Cordova 移动 应 用 开发 实战 


范例 第 10 行 生成 了 一 个 大 小 为 0~2 的 随机 数 ， 用 来 确定 最 终 显 示 哪 幅 图 片 ， 该 值 会 在 
onDeviceReady() 函 数 中 被 使 用 (范例 16~21 行 ) 。 除 此 之 外 ， 还 要 在 屏幕 下 方 显 示 一 行 贺 
词 ， 该 功能 也 是 在 此 处 实现 的 。 


8.5.4 ”最 终 实现 

以 上 已 经 实现 了 “拜年 ”的 动画 ， 本 小 节 要 将 这 一 动画 与 本 章 学 习 的 加 速度 传感器 结合 
起 来 ， 使 它 能 够 之 给 用 户 一 种 在 庙会 抽签 祈福 的 紧张 气氛 。 

【范例 8-4】 在 应 用 中 加 入 交互 。 
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将 该 范例 编 详 运 行 之 后 屏幕 上 将 会 弹出 对 话 框 提示 : “ 摇 昂 手机 后 出 现 祝 福 ”， 之 后 用 
力 摇 哆 手机， 图 像 以 及 贺词 将 会 随 看 手机 的 轻微 震动 浙 浙 浮现 。 

首先 ， 此 次 修改 去 挥 了 范例 8-3 中 第 23 行 处 对 start() 函 数 的 调用 ， 但 是 增加 了 对 加 速度 
传感器 的 监听 ， 如 范例 第 53~57 行 所 示 。 这 里 就 遇 到 了 一 个 难题 ， 因 为 即使 是 一 般 静 止 情 况 
下 ， 手 机 还 是 会 带 有 一 定 加 速度 的 ， 那 么 怎样 才能 确定 手机 是 被 用 户 晃 动 了 而 非 一 般 的 移动 
或 者 根本 只 是 正 稼 的 轻微 幅度 抖动 呢 ? 

范例 第 65 行 有 一 个 判断 ， 将 来 自 三 个 方 癌 的 加 速度 的 平方 和 再 开 方 ， 得 到 一 个 “平均 
的 ”加 速度 。 这 里 将 判定 是 否 是 人 为 “ 摇 玩 ”的 临界 点 定 为 13， 即 当 总 的 加 速度 大 于 15 时 
判定 是 人 为 地 摇晃 手机 。 为 了 更 加 保险 ， 笔 者 还 做 了 进一步 的 约束 ， 在 范例 72 行 中 使 用 了 一 
个 变量 u_roll 记录 的 大 于 15 的 晃动 次 数 与 10 次 作 比 较 。 也 就 是 说 ， 只 有 获取 到 10 次 比较 剧 
烈 的 蝎 动 后 系统 才 会 判定 用 户 蛙 动 了 手机 ， 开 始 显示 祝贺 。 





男 外 ， 为 了 让 用 户 获 得 更 加 真实 的 体验 ， 在 范例 第 70 行 还 使 用 了 震动 来 作为 反馈 。 注 
意 : 本 例 中 震动 的 时 间 为 300ms， 正 好 与 加 速度 监听 器 的 频率 是 相同 的 ， 不 至 于 产生 两 次 震 
动车 加 的 bug。 
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8.6 小 结 


本 章 学 习 了 使 用 accelerometer 对 象 获取 设备 加 速 信 息 的 方法 ， 并 详细 地 介绍 了 加 速度 传 
感 占 使 用 的 场合 ， 希 望 对 读者 有 所 启发。 此外， 本章 最 后 的 例子 已 经 开始 接触 到 多 种 操作 互 
相交 互 的 方法 《震动 效果 与 加 速度 传感器 ) ， 这 也 是 手机 应 用 交互 性 的 一 个 趋势 。 在 实际 开 
发 中 能 够 使 用 加 速度 传 感 上 费 的 地 方 非常 之 多 ， 这 需要 读者 在 日 常生 活 中 不 断 去 积累 。 
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上 一 章 介 绍 了 Cordova 中 加 速度 传感器 的 调用 方法 ， 除 了 加 速度 传感器 外 ，Cordova 也 
提供 了 对 其 他 设备 传感器 的 调用 方法 。 对 设备 传感器 的 使 用 主要 分 为 对 地 理 位 置 的 获取 和 方 
向 的 获取 。 为 了 能 够 方便 开发 者 调用 ，Cordova 封装 了 用 来 访问 GPS 信息 的 Geolocation 类 和 用 
来 访问 设备 方向 的 Compass 类 。 


本 章 的 主要 内 容 有 : 


使 用 getCurrentPosition() 方 法 获取 设备 在 当前 所 处 的 坐标 位 置 。 
利用 watchPosition0) 方 法 对 设备 所 处 的 坐标 位 置 进行 监听 。 
使 用 getCurrentHeading() 方 法 获取 设备 当前 的 朝向 。 

利用 watchHeading() 方 法 监听 设备 的 朝向 。 


利用 Geolocation 类 获取 设备 地 理 信息 


GPS 是 现代 知 能 手机 中 一 个 非常 重要 的 功能 ， 能 够 实现 全 球 范 围 内 对 设备 的 实时 定位 ， 
近 几 年 来 在 一 些 社交 应 用 中 也 经 常见 到 它 发挥 作 用 。 比 如 微 信 的 “ 摇 一 摇 ” 功 能 就 利用 了 
GPS 来 获取 用 户 的 地 理 位 置 。 图 9-1 是 微 信 利 用 GPS 获取 两 用 户 之 间距 离 的 一 个 例子 。 





图 9-1 微 信 通过 GPS 计算 用 户 之 间 的 距离 
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Cordova 利用 类 Geolocation 来 获取 设备 所 在 地 理 位 置 的 坐标 。 对 于 一 些 不 支持 GPS 的 设 
备 ，Geolocation 类 还 可 以 借助 IP 地 址 、RFID、Wi-Fi、 赣 牙 的 MAC 地 址 或 GSM/CDMA 手 
机 ID 的 网 络 信号 做 出 推 新 ， 以 保证 其 兼容 性 。 


2 人 其 于 IP 地 址 、GSM 其 站 等 方法 部 可 以 保证 返回 设备 所 在 地 理 位 置 的 经 度 和 纬度 ， 
但 是 这 样 得 到 的 结果 却 不 一 定 准确 。 在 实际 开发 时 仍 要 充分 考虑 到 不 支持 GPS 的 设备 可 






能 存在 的 误差 。 


9 e 2 利用 getCurrentPosition() 方 法 获取 
设备 所 在 坐标 


在 Geolocation 类 中 ， 最 基本 的 方法 就 是 getCurrentPosition() 了 ， 它 的 作用 是 通过 一 个 
Positon 对 象 来 返回 设备 所 在 的 位 置信 息 。 范 例 9-1 是 使 用 getCurrentPosition() 方 法 的 一 个 
例子 。 

首先 在 命令 行 执行 命令 添加 插件 :cordova plugin add cordova-plugin-geolocation 。 

【范例 9-1】 使 用 getCurrentPosition() 方 法 获取 设备 位 置信 息 。 
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50 </body> 
LE Lo 
运行 后 设备 上 将 显示 出 当前 所 处 的 位 置信 息 ， 如 图 9-2 所 示 。 
获取 当前 位 置信 息 
你 的 当前 位 置 : 


经 度 : 120.1993185282873 
纬度 : 30.24104779123351 
海拔 高 度 : 48.52349853515625 
精度 : 50 

海拔 准确 度 : 

航向 : 

速度 : 

时 间 : 


9-2 使 用 getCurrentPosition0 获 取 当 前 的 位 置信 息 

本 范例 使 用 了 方法 getCurrentPosition() 来 获取 设备 所 处 的 位 置信 息 ， 如 第 12 行 所 示 。 与 
其 他 Cordova 所 提供 的 API 相似 ， 该 方法 同样 是 将 处 理 成 功 和 失败 的 两 个 方法 onSuccess 和 
onError 作为 参数 。 

不 过 在 onSuccess0) 方 法 中 默认 会 传送 一 个 position 对 象 ， 该 对 象 保存 了 两 个 子 对 象 
coords 和 timestamp。 其 中 coords 封装 了 一 系列 与 设备 当前 所 处 地 理 位 置 有 关 的 信息 ， 比 如 经 
度 、 纬 度 、 海 拔 等 。timestamp 对 象 则 只 是 单纯 地 记录 了 coords 对 象 被 创建 的 时 间 。 表 9-1 中 
是 coords 对 象 中 所 包含 的 各 个 属性 以 及 它们 的 含义 。 


表 9-1 coords 对 象 中 封装 的 属性 


名 称 类 型 。” 说 明 
ads | 数字 


heading 。 | 数字 | 当前 设备 运动 状态 ， 以 正 北 为 零点 显示 当前 运动 方向 与 正 北方 向 的 角度 
第 16~23 行 可 以 看 到 这 些 属 性 的 使 用 ， 需 要 注意 的 是 timestamp 并 不 只 是 单纯 的 以 小 时 
来 记录 coords 被 创建 的 时 间 ， 其 中 还 包含 了 年 、 月 以 及 所 处 的 时 区 等 信息 。 
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在 Cordova 中 并 不 是 单纯 地 使 用 从 GPS 中 获取 的 数据 来 显示 位 置信 息 的 ， 当 GPS 不 可 
用 时 ，Cordova 还 会 利用 网 络 甚 至 是 与 基站 的 通信 来 判断 当前 的 位 置 。 因 此 即使 在 不 具 
备 GPS 功能 的 设备 上 也 可 以 使 用 该 功能 。 





9. 使 用 watchPosition() 方 法 
监控 设备 的 位 置 变 化 


本 节 将 介绍 一 种 与 上 一 节 中 的 getCurrentPosition0 方 法 具有 类 似 功 能 的 方法 ， 只 不 过 它 能 
够 对 设备 的 位 置信 息 进行 连续 监控 。 看 到 这 一 点 不 知道 读者 有 没有 联想 到 什么 ? 没 错 ， 那 就 
是 在 上 一 草 介 绍 过 的 加 速度 传感器 ， 也 有 痢 类 似 的 方法 用 来 监视 设备 加 速度 的 变化 。 范 
例 9-2 中 展示 了 watchPosition() 方 法 的 使 用 。 

【范例 9-2】 使 用 watchPosition() 方 法 监视 设备 的 位 置 变 化 。 
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通过 范例 不 难看 出 ， 该 方法 与 在 上 一 节 中 介绍 过 的 getCurrentPosition() 方 法 在 用 法 上 非常 
类 似 ， 只 是 增加 了 一 个 参数 option。 那 么 参数 option 又 是 干什么 的 呢 ? 
从 Cordova 提供 的 文档 中 可 以 了 解 到 ， 这 里 的 option 实际 上 是 一 个 geolocationOptions 类 型 
的 可 选 参数 ， 用 来 定义 对 程序 获取 位 置信 息 的 一 些 设置 。 它 的 具体 属性 以 及 说 明 参 见 表 9-2。 
表 9-2 option 对 象 中 的 属性 
J 说 阴 


pe 开 IJ 
整数 型 | 用 来 定义 获取 设备 位 置信 息 的 频率 ， 单 位 是 毫秒 


提供 一 个 表明 应 用 程序 希望 获得 最 佳 可 能 结果 的 提示 ， 可 以 理解 
enableHighAccuracy 布尔 类 型 
为 是 否 希 望 使 用 高 精确 度 的 定位 


两 次 获取 设备 位 置信 息 所 允许 的 最 大 时 间 间隔 ， 单 位 为 毫秒 


应 用 程序 将 接受 一 个 缓存 的 位 置信 息 ， 该 缓存 的 位 置信 息 的 年 龄 
maximumAge 
不 大 于 此 参数 设 定 值 ， 单 位 是 毫秒 。 


实际 上 maximumAge 属性 的 出 现 是 由 于 最 初 对 frequency 的 定义 不 符合 W3C 规范 ， 因 此 
设计 了 这 个 参数 计划 在 将 来 用 它 来 取代 frequency。 





如 果 说 watchPosition0) 的 用 法 就 只 有 这 些 ， 也 许 已 经 足够 了 ; 但 是 在 某 些 应 用 上 却 可 能 会 
有 一 些 瑕 竟 ， 比 如 当 用 户 想 要 停止 获取 设备 位 置 时 该 怎么 办 呢 ?” 总 不 可 能 让 用 户 去 “后 台 ” 
强行 关闭 挥 程序 吧 。 

事实 上 还 有 一 个 方法 是 笔者 没有 介绍 到 的 ， 那 就 是 在 范例 第 33 行 用 到 的 clearWatch() 方 
法 。 该 方法 只 需要 一 个 参数 ， 就 是 当前 所 监视 位 置信 息 所 使 用 的 id， 那 么 这 个 id 又 是 从 哪里 
来 的 呢 ? 再 回 过 头 来 看 范例 第 14 行 。 在 watchPosition() 方 法 开始 执行 时 会 返回 一 个 id 数值 ， 
而 在 本 范例 中 将 这 个 数值 保存 在 了 变量 watchID 中 ， 因 此 当 想 要 停止 对 设备 位 置 的 监控 时 只 
需要 执行 : 





说 到 这 里 ， 笔 者 突然 想到 了 一 种 非常 不 错 的 表白 方法 ， 读 者 可 以 去 尝试 一 下 ， 当 然 还 是 
利用 本 节 中 介绍 的 watchPosition() 方 法 来 实现 。 既 然 能 够 利用 watchPosition() 方 法 实现 对 设备 
位 置信 息 的 获取 ， 那 么 如 果 把 具有 同样 类 型 的 应 用 装 在 女神 的 手机 里 会 怎样 呢 ? 

当然 这 不 是 教唆 读者 利用 这 种 方法 去 监视 女神 的 动态 ， 然 后 半路 拦截 ; 而 是 有 更 加 浪漫 


121 





Apache Cordova 移动 应 用 开发 实战 


的 方法 。 既 然 能 够 获取 女神 的 位 置 了 ， 是 不 是 可 以 将 这 些 坐 标 在 屏 大 上 显示 出 来 呢 ? 那么 如 
果 拿 看 女神 的 手机 在 田野 里 绕 看 一 个 心 形 的 图 案 跑 一 圈 屏 僧 上 是 不 是 就 会 显示 出 一 个 心 形 


呢 ? 


好 了 ， 话 就 说 这 么 多 ， 能 不 能 成 功 束 看 各 位 读者 的 动手 能 力 了 。 


设备 方向 的 获取 


本 章 前 面 的 内 容 介 绍 了 怎样 获取 设备 的 位 置信 息 ， 不 知道 读者 在 学 完了 这 些 内 容 之 后 ， 


有 没有 考虑 过 这 些 API 能 够 实现 什么 样 的 功能 呢 ? 反正 笔 者 当时 思考 了 很 人 ， 结 果 近 平 元 诞 
地 想到 了 指南 针 。 这 是 一 个 非常 患 苇 的 想法 ， 因 为 从 坐标 信息 到 方 四 信息 完全 古 两 个 不 搭 边 
的 功能 。 但 是 这 也 说 明了 一 个 问题 ， 指 南 针 作为 移动 设备 在 地 理 信息 方面 的 应 用 实在 是 太 深 
入 人 心 了 ， 如 图 9-3 所 示 的 就 古 一 于 指南 针 应 用 的 界面 。 





图 9-3 一 款 指南 针 应 用 的 界面 
有 过 开发 应 用 经 验 的 读者 可 能 都 知道 ， 想 要 开发 一 个 具有 动画 效果 (如 指南 针 的 转动 ) 


的 应 用 是 很 难 的 ， 但 是 如 果 用 HTML 5 就 能 够 比较 轻松 地 实现 这 样 的 动画 效果 。 那 么 是 不 是 
可 以 用 Cordova 来 实现 一 球 指南 针 呢 ? 答 案 是 肯定 的 。 


如 果 要 实现 指南 针 的 功能 ， 束 必须 要 有 能 够 获取 设备 方 同 的 API， 这 正 是 在 本 他所 要 介 


绍 的 内 容 。 


01 
02 
03 
04 
05 
06 
07 


ne 


首先 在 命令 行 执行 命令 添加 插件 :cordova plugin add cordova-plugin-device-orientation 。 
【范例 9-3】 利 用 getCurrentHeading(0) 方 法 获取 设备 的 当前 朝向 。 


<1DOCTITYPE hml> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 利 用 getcurrentHeading () 方法 获取 设备 的 当前 朝 癌 </tit1le> 
<script src="js/cordova.js" type="text/javascript"></script> 


“Cp 
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运行 结果 如 图 9-4 所 示 ， 得 出 的 结果 是 笔者 的 手机 所 朝 的 方 癌 。 


index.html 
当前 设备 方向 与 正 北方 相差 


351.6536254882812 





getCurrentHeading() 方 法 的 使 用 与 其 他 Cordova 中 的 API 非常 类 似 ， 依 然 是 在 回调 函数 
onSuccess 中 对 获取 到 的 结果 进行 处 理 。 该 方法 传递 来 的 结果 是 一 个 heading 对 象 ， 它 包含 了 
表 9-3 所 示 的 4 个 属性 。 
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表 9-3 heading 对 象 中 的 属性 
名 称 类 型 “说明 


用 来 表示 设备 在 某 一 时 刻 相对 于 正 北方 向 偏 移 的 角度 ， 它 的 值 从 0-359.99 不 等 


与 magneticHeading 相同 ， 但 是 当当 前 的 方向 不 确定 时 ， 比 如 你 现在 正在 北极 ， 


trueHeading 数字 
那么 该 属性 的 值 将 是 负 的 


测量 的 方向 可 能 存在 的 误差 
用 来 记录 获取 设备 方向 的 时 间 ， 单 位 是 毫秒 





尺 . 忆 ”监视 设备 方向 的 两 种 方法 


上 一 节 介 绍 了 使 用 Cordova 获取 设备 方 同 的 方法 ， 细 心 的 读者 可 能 已 经 发 现 笔者 在 本 节 
要 介绍 的 两 种 传感器 了 。 但 是 为 什么 要 把 它们 合 在 一 起 介绍 呢 ? 除了 都 可 以 用 来 获取 与 地 理 
位 置 有 关 的 信息 之 外 ， 也 许 还 会 有 其 他 的 原因 。 

那 就 是 这 两 种 传感器 的 用 法 实在 是 太 相 近 了 ， 在 获取 设备 的 位 置信 息 时 ， 可 以 使 用 
getCurrentPosition() 和 watchPosition()， 而 在 获取 设备 的 方 同 时 除了 可 以 使 用 上 一 节 中 介绍 的 
getCurrentHeading() 之 外 ， 还 可 以 使 用 男 一 个 方法 watchHeading() 来 对 设备 的 方 同 进行 监视 。 

【范例 9-4】 使 用 watchHeading0 方 法 监视 设备 方向 。 
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运行 结果 如 图 9-5 所 示 ， 如 果 点 击 屏 妖 顶部 的 “显示 当前 方向 ”字样 ， 则 会 停止 对 设备 
方 癌 的 监视 。 
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无 SIM 卡 全 下 午 8:20 D+ 


显示 当前 的 方向 


当前 设备 方向 是 : 
296.1918029785156 


1481026809592.216 


9-5 监视 设备 方向 所 得 的 结果 


通过 对 范例 的 阅读 可 以 发 现 ，watchHeading0 的 使 用 与 9.3 节 介绍 的 watchPosition() 方 法 
是 一 样 的 ， 因 此 这 里 就 不 再 对 它 的 用 法 做 过 多 的 重复 介绍 了 。 这 里 要 说 的 是 除了 
watchHeading()， 在 Cordova 中 还 有 一 种 方法 能 够 实现 对 方向 的 监控 ， 那 就 是 
watchHeadingFilter() 方 法 ， 它 的 作用 是 当 设 备 方 同 发 生变 化 时 执行 相对 应 的 onSuccess 函数 。 
【范例 9-5】 使 用 watchHeadingFilter0 方 法 监视 设备 方向 。 
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运行 结果 如 图 9-6 所 示 ， 读 者 可 以 通过 静止 手机 或 是 将 手机 转动 一 定 的 角度 来 观察 屏幕 
上 数据 的 变化 。 


显示 当前 的 方向 


当前 设备 方向 是 : 81.36 
1396967543097 





9-6 ”使 用 watchHeadingFilter() 方 法 监视 设备 方向 
从 范例 中 可 以 看 出 ， 该 watchHeadingFilter() 方 法 在 使 用 上 与 范例 9-4 中 的 watchHeading() 
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方法 非常 类 似 ， 但 是 在 第 13 行 中 可 以 看 到 ， 该 方法 的 option 参数 发 生 了 变化 ， 因 为 在 此 处 
所 使 用 的 option 变 成 了 一 个 compassOptions 类 型 的 对 象 ， 开 发 者 可 以 通过 它 来 设置 当 设 备 变 
化 了 多 少 角度 时 程序 才 会 有 所 反应 。 

接 下 来 对 这 两 种 方法 进行 比较 ， 不 过 既然 同时 存在 两 种 方法 ， 而 没有 废除 挥 其 中 的 一 
种 ， 那 就 说 明 两 种 方法 都 存在 可 取 的 地 方 。watchHeading0 方 法 用 来 按照 一 定 的 时 间 周 期 对 设 
备 的 方 同 进 行 监视 ， 这 就 会 导致 一 个 问题 ， 如 果 这 个 频率 设 得 太 高 ， 比 如 每 阳 lms 就 获取 一 
次 方 回 数据 ， 即 使 是 八 核 的 CPU 也 会 有 些 吃力 ; 而 如 果 频 率 设 得 太 低 ， 则 获取 的 数据 又 不 够 
精确 。 

使 用 watchHeadingFilter(0) 方 法 就 不 需要 考虑 这 样 的 问题 ， 但 是 却 会 遇 到 另 一 种 矿 烦 ， 比 
如 将 option 参数 中 的 值 设 的 过 大 ， 如 范例 中 的 10， 就 会 造成 设备 不 够 灵敏 。 但 是 一 般 来 说 将 
这 个 值 设 为 1 就 足够 使 用 了 。 但 是 假设 此 时 过 到 了 一 个 爱 动 的 用 户 ， 它 笑 试 让 手机 在 指 尖 旋 
转 ， 那 么 就 会 发 生 可 怕 的 事情 ， 虽 然 手机 不 会 爆炸 ， 但 至 少 这 个 程序 很 难 再 保持 正常 运行 
Ts 


9.0 小 结 


本 章 主 要 学 习 了 使 用 Cordova 如 何 获取 设备 的 位 置信 息 以 及 方 回 的 信息 ， 再 加 上 在 第 8 
章 介绍 过 的 加 速度 传感器 ， 相 信 读 者 已 经 能 够 想 出 许多 令 人 激动 的 玩法 了 。 通 过 本 章 的 学 
习 ， 读 者 还 应 当 能 够 体会 到 Cordova 所 提供 的 API 在 用 法 上 的 一 些 共同 思路 ， 理 解 了 这 种 思 
路 之 后 ，Cordova 的 学 习 之 路 就 会 容易 许多 。 
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除了 设备 传感器 ， 对 多 媒体 文件 的 处 理 也 是 智能 手机 一 个 非常 重要 的 功能 。 像 酷 我 音乐 
盒 、 酷 狗 音乐 等 音乐 播放 器 都 是 每 一 人 台 智 能 手机 上 必 装 的 应 用 。 因 此 在 开发 智能 手机 应 用 
时 ， 对 音频 文件 的 处 理 是 每 一 个 开发 者 都 必须 掌握 的 。 在 Cordova 中 ，Media 对 象 提供 了 对 音 
频 文件 的 播放 和 录制 的 功能 。 本 章 还 将 实现 一 个 简单 的 录音 机 ， 能 够 实现 对 音频 文件 的 录 
制 、 播 放 和 暂停 功能 。 





本 章 的 主要 知识 点 有 : 


@ 利用 Cordova 播放 和 暂停 音频 文件 的 方法 。 
@ 获取 音频 文件 资源 的 方法 。 
@ 利用 Cordova 录制 音频 文件 的 方法 ， 以 及 播放 所 录制 的 音频 文件 的 方法 。 





0. 利用 Cordova 播放 音频 的 方法 


本 节 将 先 以 一 个 例子 来 播放 一 段 来 和 目 于 网 络 的 音乐 ， 如 范例 10-1 所 示 。 
首先 在 命令 行 执行 命令 添加 插件 : cordova plugin add cordova-plugin-media。 
【范例 10-1】 利 用 Cordova 播放 一 段 音 乐 。 
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程序 运行 之 后 ， 点 击 屏 幕 上 的 “利用 Cordova 播放 音乐 ” 字样， 就 可 以 听 到 有 音乐 
从 手机 扬声器 中 发 出 ， 并 将 弹出 对 话 框 ， 内 容 为 playAudio0:Audio Success， 用 以 提示 用 
户 Media 对 象 创 建成 功 。 接 下 来 将 结合 范例 代码 讲解 在 Cordova 中 利用 Media.play() 方 法 
播放 音乐 的 方法 。 

在 Cordova 中 ，Media 对 象 为 开发 者 提供 了 控制 设备 音频 的 能 力 ， 其 中 paly0 方 法 可 以 用 
来 播放 指定 的 音频 文件 。 在 使 用 play(0) 方 法 时 ， 首 先 要 指定 音频 文件 的 来 源 ， 如 范例 第 21 行 
所 示 。 由 于 play(0) 方 法 同时 可 以 文 持 本 地 和 网 络 的 音频 文件 ， 为 了 便于 理解 可 以 使 用 网 络 上 
音频 文件 的 url 地 址 。 
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第 22 行 创建 了 一 个 新 的 Media 对 象 ， 与 Cordova 中 的 大 多 数 其 他 方法 一 样 ， 在 创建 
Media 对 象 时 需要 定义 回调 函数 。 


展示 在 最 初 的 时 候 ，Cordova 处 理 音频 的 API 并 没有 遵循 W3C 规则 ， 仅 仅 是 为 开发 者 提供 了 
一 个 方便 调用 的 接口 ， 但 是 随 着 版 本 的 更 新 和 Cordova 的 不 断 完 善 ， 目 前 这 一 现象 已 经 
得 到 了 很 好 的 改善 。 





创建 一 个 Media 对 象 的 参数 有 4 个 ， 以 下 是 官方 对 该 对 象 的 声明 : 


Var media = new Media(src，mediaSuccess， [mediaError], [mediaStatus]); 


在 该 声明 中 有 4 个 参数 ， 其 中 音频 文件 的 源 地 址 和 Media 对 象 创 建成 功 的 回调 函数 
mediaSuccessO 是 必 选 的 ， 而 其 他 两 个 参数 是 可 选 的 。 可 选 参数 中 mediaError() 函 数 用 来 对 
Media 对 象 创建 失败 的 情况 进行 操作 ，mediaStatus0 是 在 音频 播放 状态 发 生变 化 时 所 调用 的 函 
数 。 

接 下 来 就 可 以 调用 Media 的 play0 方 法 对 音频 进行 播放 了 ， 如 范例 第 24 行 所 示 。 


24 my_media.play(); 


在 虚拟 机 上 进行 测 斌 时， 如果 获取 来 自 网 络 上 的 资源 速度 较 慢 ， 可 以 在 DDMS 中 将 


Speed (网 速 ) 设置 为 Fast (快速 ) ， 如 图 10-1 所 示 。 








困 )LogCat 图 Devices 国 Console 国 Allocation Tracker 全 Network Statistics 2 医治 Threads 园 Emulstor Control 辣 System Information NL] 


Speed:[Fast ooms) "|[step| [Reset] | 通过 此 处 对 虚拟 机 的 网 速 进行 设置 


























10-1 在 DDMS 中 模拟 设备 的 网 速 


10.2 利用 pause() 方 法 暂停 播放 音乐 


上 一 节 学 习 了 利用 Media 对 象 的 paly0 方 法 来 播放 首 乐 ， 但 是 在 测试 范例 10-1 时 遇 到 了 
一 点 小 问题 ， 就 是 一 旦 音乐 开始 播放 ， 那 声音 就 像 春 晚 的 小 彩旗 一 样 根本 停 不 下 来 。 试 想 ， 
如 果 做 了 这 样 一 款 音 乐 播放 器 ， 会 有 用 户 喜 欢 吗 ? 所以， 除了 播放 之 外 ， 暂 停 已 经 播放 了 的 
音乐 也 是 在 实际 开发 中 非常 重要 的 一 个 部 分 。 
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【范例 10-2 】 利 用 pause0 方 法 暂停 播放 音乐 。 
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程序 运行 之 后 ， 点 击 屏 幕 上 的 “利用 Cordova 播放 音乐 ”字样 ， 就 可 以 听 到 有 音乐 从 手 
机 扬声器 中 发 出 ， 再 点 击 “ 暂 停 音乐 播放 ”字样 ， 则 音乐 会 被 暂停 。 其 原因 就 在 于 点 击 “ 暂 
停 音 乐 播放 ”后 会 调用 自 定义 函数 pauseAudio0， 而 在 pauseAudio0 函 数 中 则 会 调用 Media 对 
象 的 pause0 方 法 (范例 第 29 行 所 示 ) 。 

看 第 28 行 会 发 现 ， 在 pause() 方 法 外 还 有 一 个 if 判断 ， 它 的 作用 是 在 暂停 音乐 之 前 先 判 
岂 Media 对 象 是 否 确 实 存在 ， 在 实际 开发 中 如 果 要 改变 某 一 对 象 的 状态 ， 先 判断 它 的 存在 性 
是 非常 重要 的 。 


1 0 .了 利用 stop0 方 法 停止 播放 音频 文件 


上 一 节 学 习 了 利用 pause0) 暂 停 播放 音频 文件 的 方法 ， 本 节 将 继续 学 习 一 种 与 pause() 非 常 
类 似 却 又 有 不 少 区 别 的 方法 : stop()。 
【范例 10-3 】 利 用 stop0 方 法 停止 音乐 播放 。 
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运行 之 后 可 以 通过 点 击 屏幕 上 的 “停止 音乐 播放 ”字样 来 停止 正在 播放 中 的 音乐 。 与 
pause() 方 法 不 同 的 是 ， 使 用 pause0 方 法 暂停 的 音乐 可 以 通过 play0 方 法 继续 播放 ， 而 使 用 
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stop() 方 法 停止 播放 的 音乐 想 要 再 进行 播放 ， 将 会 从 头 开始 。 
可 以 再 在 页 面 中 加 入 pause() 方 法 来 比较 两 方法 的 不 同 ， 如 图 10-2 所 示 。 


四 碍 片 人 下 午 9:41 * ms 


利用 Cordova 播 放 音 
乐 


暂停 音乐 播放 
停止 音乐 播放 


10-2 对比 pause0 和 stop() 方 法 的 不 同 


1 0 .4 获取 音频 文件 的 更 多 信息 


在 音乐 播放 器 的 界面 上 通 向 都 会 有 一 条 “ 线 ”， 用 来 表示 音乐 播放 的 总 时 长 和 进度 〈 如 
图 10-3 所 示 ) 。 如 果 想 要 实现 这 样 的 功能 ， 就 需要 获得 音频 文件 的 总 长 度 以 及 当前 音频 文件 
播放 的 进度 。Cordova 也 提供 了 这 样 的 方法 。 





10-3 酷 狗 音乐 中 的 进度 条 


media.getDuration() 方 法 的 作用 是 返回 一 个 音频 文件 的 总 时 长 ，media.getCurrentPosition() 
的 作用 是 返回 当前 音频 文件 所 播放 到 的 位 置 ， 范 例 10-4 将 使 用 它们 来 获取 一 首 歌 的 总 时 长 以 
及 播放 进度 。 

【范例 10-4】 获 取 音 乐 的 总 时 长 以 及 播放 进度 。 
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【[ 第 10 章 Cordova 对 音频 的 控制 


运行 结果 如 图 10-4 所 示 。 


4.5791200.046 
利用 Cordova 播 放 音 
乐 

停止 音乐 播放 


10-4 获取 音频 文件 的 播放 位 置 以 及 总 长 度 
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getDuration() 和 getCurrentPosition0 的 返回 值 都 是 一 个 单位 为 秒 的 小 数 ， 分 别 用 来 表示 音 
乐 的 总 长 度 以 及 当前 播放 进度 。 寿 想 要 获取 音频 文件 的 总 长 度 ， 可 直接 使 用 getDuration() 方 
法 ， 如 范例 第 30 行 所 示 。 理 论 上 来 说 ，getCurrentPosition0 也 是 如 此 使 用 ， 但 是 由 于 它 的 作 
用 是 返回 音乐 当前 播放 位 置 ， 这 束 决 定 了 它 用 来 代表 一 个 动态 的 过 程 。 

因为 音频 文件 是 在 不 断 播 放 的 ， 因 此 不 可 能 保证 当前 屏幕 上 显示 的 时 间 就 是 当前 的 播放 
进度 ， 为 了 尽量 精确 就 需要 使 用 JavaScript 中 的 setInterval(0 方 法 来 配合 ， 如 范例 第 32 行 所 
示 。 

当 使 用 了 getCurrentPosition() 后 ， 所 获得 的 数据 会 被 保存 在 对 象 position 中 ， 此 时 就 可 以 
利用 获取 播放 进度 成 功 的 回调 函数 来 处 理 获 得 的 数据 。 


1 ,播放 指定 位 置 的 音乐 


上 一 节 介 绍 了 利用 Cordova 获取 音频 文件 总 长 度 以 及 当前 播放 位 置 的 方法 ， 通 过 这 两 个 
方法 再 加 上 CSS 和 JavaScript 的 配合 就 已 经 能 够 完成 一 个 不 错 的 进度 条 了 。 相 比 目 前 比较 成 
熟 的 应 用 中 的 进度 条 ， 比 如 酷 狗 音乐 ， 还 缺少 了 利用 进度 条 来 调整 播放 进度 的 功能 。 但 是 没 
有 关系 ， 本 节 将 介绍 一 个 方法 来 弥补 这 个 不 足 。 

【范例 10-5】 利 用 seekTo0 方 法 从 指定 位 置 播放 音乐 。 
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运行 之 后 音乐 会 自动 播放 ， 当 播放 到 5s 和 10s 处 时 ， 音 乐 会 有 一 个 短暂 的 停顿 发 生 ， 图 
10-5 为 第 10s 音乐 刚 从 停顿 中 恢复 时 的 截图 。 


无 SM 卡 令 下 午 11:19 » 国 一 4 
播放 

停止 

11.041sec 


10-5 音乐 播放 至 10s 时 的 截图 


1 和风。 具体 的 效果 还 请 读者 实际 运行 程序 来 感受 ， 但 是 笔者 要 说 的 是 : 由 于 运行 效率 等 方面 的 
原因 ， 在 Cordova 中 的 计时 并 不 十 分 精确 ， 甚 至 有 着 较 大 的 误差 。 因 此 在 使 用 此 类 功能 
时 一 定 要 做 好 测试 ， 避 免 可 能 存在 的 误差 。 










0.6 使 用 Cordova 录制 声音 


Media 对 象 除了 可 以 播放 音频 之 外 ， 还 有 一 个 重要 的 功能 就 是 可 以 实现 对 音频 的 录制 ， 
这 一 功能 是 通过 Media 对 象 的 startRecord() 方 法 和 stopRecord0 方 法 实现 的 。 

在 苹果 公司 看 来 录音 功能 会 涉及 隐私 敏感 数据 ， 所 以 如 果 你 想 要 调用 用 户 手 机 的 录音 功 
能 的 话 要 先 获取 用 户 的 同意 才 可 以 ,方法 是 在 工程 的 info.plist 文件 里 面 添加 相应 的 字段 
NSMicrophoneUsageDescription， 如 图 10-6 所 示 。 
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10-6 ”info.plist 文件 配置 信息 


该 字段 后 对 应 的 值 是 String 类 型 ， 可 以 形象 说 明 用 户 为 什么 要 使 用 该 功能 。 
【范例 10-6】 利 用 Cordova 实现 录音 功能 。 
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运行 之 后 点 击 屏 幕 上 的 “开始 录 首 ”了 字样 即 可 开始 录音 ， 底 部 开始 进行 计数 ， 当 计数 到 
10 时 录音 结束 ， 可 以 点 击 “ 播 放 ” 字 样 播放 刚刚 录 下 的 声音 ， 如 图 10-7 所 示 。 


无 StM 卡 下 午 9:11 * + 


开始 录音 
播放 
10 sec 


10-7 录音 和 播放 界面 


与 播放 首 频 一 样 ， 在 录制 音频 时 也 需要 先 定义 一 个 Media 对 象 ， 如 第 12、13 行 所 示 ， 不 
同 的 是 ， 第 一 个 参数 必须 要 定义 一 个 文件 用 来 存放 录制 的 音频 ， 本 例 中 为 myrecording.wav。 
之 后 就 可 以 使 用 startRecord() 方 法 对 声音 进行 录制 了 ， 如 第 15 行 所 示 。 
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接 下 来 又 使 用 了 一 个 setInterval0 方 法 ， 它 的 作用 是 控制 录音 时 间 的 长 短 ， 但 是 由 于 在 
Cordova 中 计数 器 实现 的 时 间 并 不 十 分 精确 〈 纯 JavaScript 中 该 图 数 所 计算 出 的 时 间 都 不 是 非 
贡 精 确 ) ， 因 此 在 实际 开发 中 建议 还 是 手动 来 结束 录音 。 


际 趣 如 果 要 定时 录制 一 段 较 长 的 音频 ， 可 以 通过 不 断 获取 系统 时 间 的 方法 来 达到 较 精确 定时 





的 目的 。 


1 0 ,A 释放 音频 资源 


在 C 语言 中 ， 如 果 要 调用 一 段 内 存 可 以 使 用 函数 malloc0 来 达到 目的 ， 而 用 过 之 后 则 可 
以 使 用 free0) 函 数 来 释放 这 一 段 内 存 ， 比 如 : 





而 在 Cordova 中 也 有 着 类 似 的 操作 。 由 于 无 论 是 设备 还 是 受 JavaScript 效率 的 限制 ， 系 
统 所 能 使 用 的 资源 都 是 有 限 的 ， 因 此 在 资源 不 用 时 要 及 时 进行 回收 。Cordova 的 Media 对 象 
并 没有 专门 用 来 释放 资源 的 方法 ， 因 此 当 需 要 蔡 换 原 有 资源 时 会 造成 浪费 ， 这 时 可 以 使 用 

Media 对 象 的 release() 方 法 。 











尤其 是 在 安 卓 系统 中 ， 由 于 系统 的 多 媒体 核心 有 限 ， 如 果 连 续 新 建 多 个 Media 对 象 ， 就 
可 能 造成 音乐 无 法 播放 甚至 是 系统 错误 。 





1 局 . 忆 实战 : 制作 一 个 简单 的 “录音 机 ”软件 


本 章 已 经 学 习 了 利用 Cordova 进行 音频 处 理 的 一 些 方法 ， 尤 其 是 10.4 节 中 还 用 一 个 比较 
复杂 的 例子 演示 了 获取 和 显示 播放 进度 的 方法 。 但 是 本 章 给 出 的 例子 都 过 于 粗糙 ， 整 个 界面 
上 就 具有 几 行 简单 的 文字 ， 给 人 一 种 粗制滥造 的 印象 。 那 么 本 节 将 进行 一 个 比较 复杂 的 实 
战 ， 来 实现 录音 机 APP。 


10.8.1 需求 分 析 

虽然 本 节 的 例子 比较 复杂 ， 但 是 由 于 篇 幅 限 制 仍然 不 会 加 入 新 的 知识 ， 主 要 是 实现 录音 
和 播放 功能 ， 并 将 这 一 功能 在 一 套 完 整 的 界面 中 实现 。 为 了 能 有 更 好 的 视觉 效果 ， 本 次 使 用 
的 例子 将 为 播放 功能 加 入 进度 条 的 视觉 效果 ， 而 录音 功能 也 要 加 入 一 个 简单 的 计时 功能 。 
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本 例 押 使 用 的 界面 结构 如 图 10-8 所 示 。 





图 10-8 录音 机 的 界面 设计 


由 于 界面 比较 简单 且 没 有 专职 的 美工 ， 为 了 达到 “ 遮 丑 ”的 效果 在 配色 上 就 需要 用 一 些 
有 强 对 比 度 的 颜色 ， 比 如 全 黑 背 景 加 上 亮度 较 高 的 绿色 或 者 蓝 色 (黑客 帝国 数字 雨 的 那 种 配 
色 ) 。 虽 然 一 直 有 开发 者 抱怨 这 样 的 方案 会 显得 非常 山寨、 非常 低级 ， 但 不 得 不 说 在 缺少 全 
职 美工 又 没有 UI 素材 可 用 时 ， 这 就 是 最 好 的 方案 了 。 


证 甘 册 由 于 使 用 大 多 素材 不 便 二 读者 学 习 ， 因 此 在 范例 中 笔者 会 尽量 不 使 用 图 片 等 素材 ， 以 
一 确保 将 最 基础 的 内 容 展现 给 读者 。 在 实际 开发 中 ， 即 使 没有 美工 ， 也 有 许多 UI 插件 
(比如 jQuery Mobile) 可 以 供 个 人 开发 者 使 用 ， 使 得 没有 美工 基础 的 开发 者 也 能 做 






出 不 错 的 界面 。 


程序 运行 后 ， 可 以 点 击 “ 录 音 ” 按 钮 对 声音 进行 录制 。 此 时 ， 该 按钮 上 的 “录音 ”字样 
变 为 “停止 ”， 界 面 上 方 将 会 播放 动画 代表 录音 正在 进行 中 ， 进 度 条 上 方 的 时 间 标 签 显示 录 
音 时 间 。 当 录音 完成 后 ， 点 击 “ 停 止 ”录音 结束 。 

“播放 ”按钮 也 是 同 理 ， 而 且 随 着 播 放 的 进行 ， 屏幕 中 央 的 进度 条 也 会 随 之 变化 来 响应 
播放 的 进度 。 


10.8.2 ”界面 实现 
准备 一 张 图 片 ， 长 宽 均 为 160px， 背 景 透 明 ， 如 图 10-8 所 示 作 为 项 部 “播放 ”动画 效果 
的 原形 素材 ， 命 名 为 rec.png。 再 新 建文 件 命名 为 index.html， 具 体内 容 如 范例 10-7 所 示 。 
【范例 10-7】 界 面 实现 之 index.html 部 分 。 
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再 新 建 一 个 文件 style.css， 内 容 如 范例 10-8 所 示 。 
【范例 10-8】 界 面 实现 之 style.css 部 分 。 
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-webkit-border-radius:15px; 


font-Ssize:260px; 
COLOr U0Ef00> 


text-align:center; 


line-height:40px; 


运行 之 后 的 效果 如 图 10-9 所 示 。 





10-9 实现 后 的 界面 效果 


在 实际 使 用 时 ， 项 部 胶带 轮 盘 的 图 片 是 可 以 转动 的 ， 从 而 形成 一 种 正在 进行 播放 或 者 是 


录音 的 状态 效果 ， 底 部 的 进度 条 以 及 按钮 上 的 字样 也 是 根据 当前 的 应 用 状态 自行 改变 的 。 


在 本 项 目 中 ， 大 致 分 为 以 下 几 个 状态 : 


未 录音 : 应 用 处 于 运行 状态 ， 但 是 未 进行 “录音 ”操作 ， 两 按钮 内 容 分 别 为 “ 录 
音 ” 和 “播放 ”， 由 于 未 进行 录音 操作 ，“ 播 放 ” 功 能 不 可 用 。 

录音 中 : 应 用 处 于 运行 状态 ， 正 在 进行 录音 ， 两 按钮 内 容 分 别 为 “停止 ”和 “ 播 
放 ”， 顶 部 胶带 轮 盘 转动 ，“ 播 放 ” 功 能 不 可 用 。 

录音 完成 : 应 用 处 于 运行 状态 ， 已 经 结束 录音 ， 两 按钮 内 容 分 别 为 “录音 ”和 “ 播 
放 ”， 顶 部 胶 帝 轮 盘 静止 ， 由 于 已 完成 录音 操作 ，“ 录 音 ” 功 能 不 可 用 ，“ 播 放 ” 
功能 可 用 。 

播放 中 : 应 用 处 于 运行 状态 ， 已 经 完成 录音 ， 两 按钮 内 容 分 别 为 “录音 ”和 “ 暂 
停 ”， 顶 部 胶带 轮 盘 转动 ， 由 于 已 经 完成 了 录音 操作 ，“ 录 音 ” 功 能 不 可 用 ，“ 播 
放 ” 功 能 可 用 。 

暂停 中 : 应 用 处 于 运行 状态 ， 播 放声 音 被 暂停 ， 两 按钮 内 容 分 别 为 “录音 ”和 “ 播 
放 ” 且 “录音 ”功能 不 可 用 。 

播放 完成 : 应 用 处 于 运行 状态 ， 播 放声 音 完成 ， 两 按钮 分 别 为 “录音 ”和 “ 播 
放 ”， 点 击 “ 播 放 ” 按 钮 将 重新 播放 声音 。 
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下 面 将 根据 以 上 6 个 状态 来 为 界面 加 入 交互 。 


10.8.3 ”界面 交互 的 实现 

根据 10.8.2 小 节 列 出 的 6 个 状态 ， 需 要 分 别 实 现 两 个 按钮 被 点 击 时 的 啊 应 函数 
onRecording() 和 onRecordPlay()。 此 外 还 需要 控制 项 部 股市 轮 盘 图 片 转动 和 议 止 的 函数 
recordRun() 和 recordStop()， 以 及 设置 播放 进度 和 录 首 时 间 的 函数 setBar0 和 setTime()。 

新 建文 件 do.js 并 在 index.html (范例 10-7) 的 第 7 行 插入 代码 引入 JavaScript 脚本 文 
件 : 


其 中 的 具体 内 容 如 范例 10-9 所 示 。 
【范例 10-9】 界 面 实现 之 do.js 部 分 。 
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在 第 1 行 声 明了 一 个 变量 applicationStatus， 用 它 的 值 来 记录 当前 录音 或 者 是 播放 的 状 
态 ， 在 图 数 onRecording() (第 26~45 行 ) 和 函数 onRecordPlay()( 第 47~77 行 ) 中 都 是 依靠 
此 变量 来 判断 接 下 来 要 进行 何 种 操作 的 。 

第 3 行 中 的 变量 angle 用 来 记录 胶带 转盘 转动 的 角度 ， 在 第 15~20 行 的 函数 
changeAngle() 中 对 它 进行 引用 。 该 函数 每 运行 一 次 ， 胶 市 转盘 都 会 转动 1*:， 由 于 setInterval() 
的 作用 ， 只 要 不 对 它 进 行 停止 操作 ， 胶 带 转 盘 将 一 直 转 动 下 去 。 


和 可以 通过 修改 sctinterval0 的 时 间 参 数 玉 设置 转盘 转动 的 速度 。 通 过 动 盏 来 向 用 户 展示 应 
用 所 处 的 状态 是 一 种 常用 而 且 能 有 效 提升 用 户 体验 的 方法 ， 在 实际 开发 中 还 可 设置 在 录 






音 和 播放 时 转盘 分 别 向 不 同方 向 转动 来 加 以 区 分 。 


第 79~87 行 中 定义 了 两 个 函数 ， 分 别 用 来 在 录制 声音 和 播放 时 设置 进度 条 的 进度 ， 由 于 
在 录制 声音 时 ， 根 本 不 知道 要 录制 多 久 因 此 也 无 法 使 用 进度 条 ， 只 能 利用 数字 显示 已 经 录制 
的 秒 数 。 当 声音 被 播放 时 ， 则 可 以 利用 Media 对 象 获取 音频 的 总 长 度 和 当前 的 播放 进度 。 而 
之 前 的 index.html 文件 中 ，id 值 为 bar 的 div 元 素 被 加 入 了 绿色 的 背景 ， 通 过 调整 它 的 宽度 就 
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可 以 形成 进度 条 一 点 一 点 增长 的 效果 了 。 
此 外 ， 目 前 一 些 函 数 还 没有 完成 ， 比 如 onRecordPlay0 和 onRecording0 还 没有 开始 对 
Cordova 播放 和 录制 声音 的 方法 加 以 调用 ， 这 些 在 下 一 小 节 将 会 补充 完整 。 


10.8.4 ”录音 和 播放 功能 的 实现 

以 上 已 经 实现 了 该 项 目的 界面 以 及 交互 功能 ， 但 是 最 本 质 的 录音 功能 却 还 迟 迟 没有 实 
现 。 观 察 范 例 10-7 的 代码 ， 会 发 现 第 10 行 有 一 句 : “// 此 处 加 入 JavaScript 代码 ”， 原 来 笔 
者 早 就 做 出 了 准备 。 

本 小 节 就 要 在 这 个 位 置 插入 用 来 实现 录音 以 及 播放 功能 的 函数 ， 如 范例 10-10 所 示 。 

【范例 10-10】 实 现 录 音 播放 功能 。 
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至 此 ， 该 应 用 所 再 要 的 录音 和 播放 功能 也 已 经 实现 了 ， 代 码 中 新 定义 了 4 个 变量 ， 它 们 
的 作用 可 以 根据 代码 中 的 注释 进行 理解 (第 1~8 行 ) 。 然 后 分 别 定义 了 用 来 实现 对 音频 进行 
录制 、 结 束 录制 、 播 放 和 暂停 的 函数 ， 在 这 些 函数 中 会 用 到 新 定义 的 4 个 变量 。 





至 于 具体 的 内 容 在 本 章 之 前 几 节 中 都 已 经 有 过 介绍 ， 希 望 读者 根据 注释 目 行 去 理解 代码 
的 内 容 ， 也 当 作 是 一 种 复习 。 


10.8.5 “最终 的 组 合 

也 许 有 性 急 的 读者 已 经 迫不及待 地 将 程序 “ 融 ” 好 放 在 虚拟 机 或 者 实体 机 中 去 运行 了 ， 
却 发 现 完全 无 法 录音 和 播放 。 当 年 笔者 按照 书本 自学 数据 结构 时 也 遇 到 过 这 样 的 粮 事 ， 代 码 
都 “ 敲 ” 进 去 了 ,但 Visual C++ 却 一 个 劲 地 报错 。 虽 然 各 个 功能 需要 的 图 数 都 写 好 了 ， 可 是 
没 经 过 组 合 又 怎么 能 发 挥 作用 呢 ? 

所 以 尽管 心急 ， 还 是 要 老 老 实 实地 回 到 范例 10-9， 对 do.js 做 一 些 简 单 的 修改 。 这 次 的 修 
改 主要 是 针对 onRecording0 和 onRecordPlay0) 两 个 函数 进行 的 。 

【范例 10-11】 修 改 后 的 函数 : onRecording0 和 onRecordPlay()。 
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在 范例 的 第 11、19、35、43、51 和 59 行 分 别 加 入 了 录音 和 播放 功能 的 函数 ， 使 得 整个 
程序 完整 起 来 ， 再 运行 就 能 够 实现 最 初 设计 的 功能 了 。 


[9 员 也 许 有 读者 认为 按照 笔者 最 初 介绍 的 Cordova 知识 点 时 采用 的 习惯 ， 应 该 先 写 好 
”Cordova 相关 的 函数 比如 本 章 介绍 的 录音 和 播放 功能 的 框架 ) 才 对 。 但 是 在 实际 开发 
中 ， 这 种 想法 却 是 不 合适 的 。 虽 然 使 用 Cordova 无 论 是 编译 还 是 调试 都 非常 方便 ， 但 是 
毕竟 不 如 在 浏览 器 中 直接 测试 来 得 方便 。 因 此 在 开发 “大 型 ”项 目 时 ， 应 将 程序 本 身 界 





面 以 及 交互 所 需要 的 函数 完成 ， 并 在 本 机 浏览 器 上 测试 通过 ， 之 后 再 去 考虑 具体 功能 的 
实现 。 这 样 才能 保证 会 有 最 高 的 生产 效率 ， 将 利益 最 大 化 。 


虽然 这 个 “录音 机 ”已 经 可 以 使 用 了 ， 但 它 还 只 是 一 个 模型 ， 有 许多 不 完善 的 地 方 ， 比 
如 它 只 能 录制 一 段 声音 并 且 没 有 保存 的 功能 。 这 很 大 程度 上 是 因为 还 有 后 续 章 节 的 一 些 内 容 
需要 学 习 所 致 ， 有 兴趣 的 读者 可 以 根据 后 续 的 内 容 想方设法 将 它 完善 起 来 。 


i 0.9 小 结 


本 章 学 习 了 使 用 Cordova 中 的 Media 对 声音 媒体 文件 进行 操作 的 方法 ， 并 实现 了 一 个 简 
单 的 录音 机 应 用 。 通 过 本 章 的 学 习 ， 读 者 应 该 已 经 有 能 力 去 独立 实现 一 些 应 用 ， 比 如 网 络 播 
放 器 、 录 音 机 等 。 但 是 ， 许 多 知识 却 并 不 是 仅 徘 一 本 书 就 能 介绍 清楚 的 ， 比 如 release0 方 法 
的 使 用 以 及 媒体 文件 对 设备 便 件 的 占用 等 ， 这 都 需要 在 实际 的 开发 中 去 体会 。 
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本 章 将 介绍 Cordova 中 最 为 复杂 的 一 类 对 象 一 一 文件 操作 类 对 象 ， 这 是 一 组 用 于 读 取 、 
修改 和 写 入 文件 信息 的 对 象 和 API。 与 前 几 章 所 介绍 的 内 容 不 同 ， 以 往 Cordova 通常 是 将 一 类 
操作 完全 封装 在 同一 个 对 象 中 ， 比 如 Media 对 象 包含 了 全 部 对 声音 操作 的 方法 ， 但 是 Cordova 
对 文件 的 操作 方法 却 被 封装 在 了 许多 不 同 的 对 象 中 ， 这 就 导致 了 学 习 难 度 的 增加 。 本 章 将 会 
更 加 着 重 于 对 基础 知识 的 介绍 ， 而 不 是 简单 的 实例 ， 以 便 读 者 理解 Cordova 的 文件 操作 。 





本 草 主 要 内 容 包 括 : 

@ Cordova 的 系统 目录 结构 ， 包 括 DirectoryEntry 和 DirectoryReader 类 的 用 法 和 介绍 。 

@ Cordova 的 文件 系统 ， 包 括 File、FileEntry 等 对 象 以 及 它们 对 文件 进行 读 写 的 方法 
和 概念 。 

@ 对 Cordova 文 件 操作 类 中 各 个 方法 所 使 用 参数 的 介绍 。 


使 用 FileReader 读 取 文件 


FileReader 类 是 Cordova 文件 系统 中 用 来 读 取 文件 信息 的 一 类 操作 。 在 这 些 操作 中 ， 文 
件 中 的 信息 将 以 字符 串 或 者 Base 64 编码 的 形式 被 读 出 ， 开 发 者 可 以 目 定 义 监听 占 来 处 理 读 
取 的 数据 。 

FileReader 类 中 的 方法 如 表 11-1 所 示 。 

表 11-1 FileReader 类 中 的 方法 

方法 名 作 
abort 终止 对 文件 的 读 操作 
以 Base 64 编码 的 形式 返回 数据 


以 二 进 制 形式 返回 读 取 的 文本 
将 读 取 的 数据 以 数组 的 形式 返回 


在 表 11-2 中 是 表 11-1 中 的 方法 会 用 到 的 一 些 参数 。 


用 
\ 式 ; 
以 红 文 本 的 形式 返回 读 取 的 妆 提 
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表 11-2 使 用 FileReader 类 进行 操作 时 会 用 到 的 参数 





参数 名 说 明 
Wp 当前 文件 读 取 操作 所 处 的 状态 ， 只 能 是 以 下 三 个 值 之 一 : EMPTY、LOADING 和 DONE, 分 
readywtate 

别 代 表 未 读 取 、 读 取 中 和 读 取 完 毕 


enor | 读 操作 明 到 错误 时 会 包 合 错误 信息 
当 读 操作 失败 后 会 被 调用 的 回调 函数 


无 论 读 操作 进行 成 功 或 者 失败 ， 在 请 求 完成 后 都 会 被 调用 的 回调 函数 


从 上 面 两 个 表格 来 看 ， 实 际 上 FileReader 类 的 使 用 与 之 前 学 习 的 其 他 类 的 使 用 没有 太 大 
的 差别 ， 因 为 都 是 遵循 W3C 规范 制定 的 。 那 么 接 下 来 就 可 以 尝试 利用 它 读 取 文 件 了 。 具 体 
实现 代码 如 范例 11-1 所 示 。 


【范例 11-1】 利 用 FileReader 类 读 取 一 个 文件 。 
首先 我 们 进入 虚拟 机 中 app 的 沙 盒 中 ， 在 tmp 文件 夹 中 放 一 个 readme.txt， 内 容 就 是 “这 
是 一 个 测试 txt”， 如 图 11-1 所 示 。 


| .com.apple....tadata.plist log.txt 


一 个 汕 
有 Re 


ji Library 国 
tmp bp 








11-1 在 app 沙 盒 中 添加 txt 文件 
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运行 之 后 可 以 看 到 ， 结 果 如 图 11-2 所 示 。 


有 不 少 读者 在 运行 了 本 范例 之 后 发 现 完 全 不 是 这 样 的 结果 ， 因 为 本 范例 的 作用 是 将 读 取 
的 readme.txt 中 的 内 容 显示 出 来 。 所 以 ， 在 进行 实验 之 前 一 定 要 保证 在 应 用 的 根 目录 下 
存在 readme.txt 这 个 文件 。 





11-2 将 读 取 的 文件 内 容 输出 


笔者 在 学 习 Cordova 文件 系统 时 ， 曾 经 一 度 由 于 和 它 的 复杂 性 而 产生 一 定 的 藤 惧 心理 ， 将 
这 部 分 放 到 了 最 后 才学 习 。 在 对 它 有 了 一 知 半 解 时 又 大 言 不 怖 地 表示 它 非常 人 简单。 那么 
Cordova 文件 操作 到 抵 难 不 难 呢 ? 接 下 来 对 范例 的 讲解 也 许 能 市 来 答案 。 

当 设 备 完成 准备 后 ， 执 行 命令 window.requestFileSystem(window.TEMPORARY，0，gotFS， 
fail) 开 始 读 取 文 件 。 

没 想到 才 进 行 了 一 步 就 遇 上 了 一 个 大 难题 ，window.requestFileSystemO 是 什么 东西 ， 之 前 
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完全 没有 学 习 过 啊 。 因 为 这 个 方法 并 不 是 Cordova 中 的 ， 而 是 在 HTMLS 中 用 来 请 求 对 沙 盒 
文件 系统 操作 权限 的 一 个 函数 ， 价 单 点 说 就 是 只 有 执行 了 这 个 命令 才能 操作 系统 中 的 文件 
《要 不 文件 安全 怎么 保障 呢 ) 。 

该 函数 的 原形 如 下 : 


window.requestFileSystem(type, size, successCallback, 
opt errorGalloack) 


其 中 使 用 了 4 个 参数 ， 这 些 参数 的 说 明 如 下 : 


@ type: 用 于 声明 存储 文件 的 类 型 ， 分 为 持久 型 的 还 是 非 持 久 型 的 ， 分 别 为 
LocalFileSystem.PERSISTENT 和 window.TEMPORARY。 定 义 为 非 持久 型 的 数据 将 
会 在 页 面 被 关闭 后 被 浏览 器 自动 删除 。 当 然 ， 由 于 本 例 中 只 是 对 文件 进行 读 取 ， 所 
以 使 用 哪个 选项 与 结果 关系 不 大 。 

@ size: 定义 了 可 由 用 户 操 纵 文件 的 总 的 大 小 ， 为 0 则 表示 无 限 。 

@ SuccessCallback: 当 请 求 成 功 后 执行 的 回调 函数 ， 本 例 将 在 此 函数 中 进行 下 一 步 的 
操作 。 

@ opt errorCallback: 请 求 失败 后 执行 的 回调 函数 。 







许多 开发 者 忽略 了 该 函数 请 求 的 权限 为 一 个 " 沙 盒 "文件 系统 的 操作 权限 ， 沙 盒 一 词 就 说 
明了 该 权限 所 能 够 操纵 的 文件 必然 有 一 定 的 局 限 性 。 比 如 一 个 应 用 无 法 对 另 一 个 应 用 所 
申请 的 文件 系统 进行 操作 ， 这 种 设计 为 HTML 5 的 安全 性 提供 了 一 定 的 保证 。 


第 16 行 是 在 权限 请 求 成 功 之 后 进行 的 操作 ， 使 用 了 方法 fileSystem.root.getFile()， 
fileSystem 是 系统 在 请 求 权限 成 功 时 返回 的 一 个 FileSystem 类 型 的 对 象 ， 它 包含 了 文件 默认 路 
径 等 一 系列 信息 。 本 例 使 用 它 来 实现 对 文件 readme.txt 的 读 取 。 读 取 成 功 后 将 进入 自 定义 函 
数 gotFileEntry 中 进行 下 一 步 的 操作 。 

gotFileEntry0O 国 数位 于 范例 的 第 19~22 行 ， 该 操作 将 默认 获取 一 个 类 型 为 FileEntry 类 型 
的 对 象 fileEntry。 该 图 数 利 用 它 的 fleO0 方 法 来 获取 文件 readme.txt 的 句柄 。 在 获取 成 功 后 将 
进入 另 一 个 目 定义 图 数 gotFile。 在 gotFileO0 男 数 中 又 遇 上 了 一 个 新 的 变量 file， 本 例 将 执行 图 
数 readAsText(file) 来 对 它 进行 读 取 ， 见 范例 第 26 行 所 示 。 

readAsText() 函 数 在 范例 的 第 39~46 行 被 定义 ， 直 到 这 时 才 算 是 真正 地 用 到 了 FileReader 
类 (如 第 40 行 所 示 ) 。 

这 下 就 不 难看 出 来 了 ， 其 实 Cordova 中 的 文件 系统 并 不 难 ， 但 是 由 于 在 使 用 时 要 牵扯 到 
的 知识 点 太 多 以 至 于 无 法 下 手 。 所 以 读者 一 定 要 注意 把 前 后 的 知识 点 连贯 起 来 ， 虽 然 有 许多 
类 ， 但 是 读者 在 实际 开发 中 一 定 要 形成 这 是 一 个 系列 的 概念 才 行 。 
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6 所 使 用 FileWriter 编写 文件 
上 一 节 介绍 的 FileReader 是 一 个 用 来 对 文件 进行 读 操作 的 类 ， 本 节 将 要 介绍 的 是 一 个 用 


来 对 文件 进行 写 操 作 的 类 ， 它 的 名 字 叫 FileWriter。 
与 FileReader 一 样 ， 它 也 封装 了 和 若干 用 来 对 文件 进行 操作 的 方法 ， 如 表 11-3 所 示 。 


表 11-3 FileWriter 对 象 中 的 方法 


在 使 用 这 些 方法 时 也 要 用 到 一 些 对 象 作为 参数 ， 如 表 11-4 所 示 。 
表 11-4 使 用 FileWriter 进行 文件 写 操作 时 会 用 到 的 参数 





参数 名 

ote 在 对 文件 进行 写 操作 时 ， 写 入 器 所 处 的 状态 ， 有 三 组 值 可 选 ， 包 括 INIT、WRITING、 

readyState 
DONE 


eme |SAXHNN 
sl。 | 入 SAXffNxXfKKGE 
piio |xfH 
or 


在 执行 写 操作 时 执行 的 回调 函数 ， 用 来 更 新 写 操作 的 操作 进度 


jonwite | 写 和 文人 成 JE 的 mW 履 
在 写 操作 被 终止 时 执行 的 回调 函数 的 函数 名 
_onemor | 当 号 操作 过 程 中 发 生 错误 所 调用 的 回调 本 数 的 于 数 名 


下 面 介绍 FileWriter 类 中 的 主要 方法 。 





1. seek() 方 法 
此 方法 用 于 修改 文件 写 入 的 位 置 ， 使 用 方法 如 下 : 
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在 使 用 seek(0) 方 法 之 前 首先 要 获得 一 个 FileEntry 类 型 的 对 象 〈 由 于 这 个 对 象 在 之 后 才 会 
进行 介绍 ， 此 处 不 做 深究 ) 。 第 8 行 的 entry 正 是 一 个 这 样 的 对 象 ， 调 用 它 的 createWriter() 方 
法 ， 将 执行 到 目 定 义 函 数 win 中 。 

在 这 里 writer 对 象 就 是 一 个 FileWriter 类 型 的 实例 ， 在 第 3 行 调用 了 它 的 seek() 方 法 ， 用 
来 将 位 置 指针 移动 到 文件 的 结尾 处 。 也 就 是 说 ， 在 使 用 该 方法 将 位 置 指针 移动 到 文件 结尾 
后 ， 再 向 文件 中 写 入 数据 ， 新 写 入 的 数据 将 被 加 入 到 文件 的 结尾 处 。 

这 里 以 一 个 简单 的 文本 文件 为 例 ， 解 释 seek() 方 法 的 使 用 ， 假 设 现在 有 一 个 文本 文件 ， 
其 中 的 内 容 为 phone， 假 如 对 它 执 行 了 操作 writer.seek(writer.length) 后 ， 再 向 文件 中 写 入 文本 
GaP， 过 程 如 图 11-3 所 示 。 


2. truncate() 方 法 
此 方法 用 于 在 指定 的 长 度 处 将 文件 截断 ， 使 用 方法 如 下 : 





比如 ， 将 含有 内 容 为 Cordova 的 文件 进行 上 面 代码 中 的 操作 后 ， 文 件 中 的 内 容 将 只 剩 下 


Phone。 
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[Plhlolnle|] © [PIhlolnlel 


一 

移动 文件 指针 
文件 指针 文件 指针 
最 初 文件 指针 位 于 文件 开头 文件 指针 被 移动 至 结尾 


nn i 


文件 指针 
在 文件 指针 处 开始 加 入 新 的 内 容 





11-3 移动 文件 指针 在 文件 结尾 处 写 入 字符 串 的 图 例 


3 品 。 有 许多 读者 认为 该 方法 实在 是 有 些 鸡肋 之 嫌 ， 首 先 它 与 JavaScript 自 带 的 那些 字 处 理 方 
法 相 比 实在 是 不 够 强大 和 方便 ， 其 次 是 Cordova 开发 者 有 许多 是 由 Web 开发 者 转行 而 来 
的 ， 这 使 得 他 们 对 JavaScript 的 熟悉 程度 要 远 高 于 Cordova。 但 是 事实 上 ，truncate() 方 法 
自然 有 它 的 方便 之 处 ， 比 如 使 用 truncate(0) 就 隐 含 了 一 个 简单 的 清空 操作 ， 而 在 实际 使 用 
中 也 可 以 用 truncate(MAXSIZE) 来 限制 文件 的 最 大 长 度 以 保证 程序 的 健壮 性 。 





3. write() 方 法 

在 图 11-3 所 示 的 过 程 中 ， 还 有 一 个 步骤 是 同文 件 中 写 入 内 容 ， 而 这 一 步骤 显然 仅 通过 
truncate() 方 法 是 无 法 完成 的 。 这 时 就 需要 用 到 FileWriter 类 中 的 男 一 个 常用 的 方法 : wrire() 
方法 。 

此 方法 用 于 同文 件 的 指针 位 置 写 入 数据 ， 用 法 如 下 : 





通过 此 方法 就 能 够 将 字符 串 some sample text 写 入 到 文件 指针 的 位 置 。 
在 笔者 学 习 本 部 分 内 容 时 ， 曾 经 有 一 个 疑问 ， 如 果 一 个 文件 中 原 有 的 内 容 是 
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1234567890， 此 时 的 文件 指针 位 于 1 和 2 之 间 ， 此 时 文件 指针 的 位 置 如 图 11-4 所 示 。 那 如 果 
在 此 时 疝 文件 中 写 入 一 个 字符 串 Cordova， 会 怎么 样 呢 ? 


1 Las151s171s1s1o。 


文件 指针 


图 11-4 此 时 的 文件 指针 位 置 示意 
实践 证 明 ， 此 时 向 文件 中 写 入 内 容 Cordova 后 文件 中 的 内 容 变 成 了 “1Cordova90”， 而 
不 是 笔者 之 前 认为 的 “1Cordova234567890”， 即 ， 利 用 write(0) 方 法 向 文件 中 写 入 内 容 会 覆盖 
原 有 的 内 容 。 


4. abort() 方 法 


该 方法 的 作用 是 在 同文 件 中 写 入 内 容 的 过 程 中 终止 系统 的 “ 写 ” 操 作 。 
接 下 来 将 给 出 一 个 综合 使 用 FileWriter 类 进行 文件 写 操作 的 例子 ， 代 码 如 范例 11-2 
所 示 。 
【范例 11-2】 利 用 FileWriter 类 进行 文件 的 写 操作 。 
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读者 可 以 运行 本 程序 来 查看 结果 。 由 于 本 例 运 行 的 结果 无 法 直接 用 图 片 来 给 出 ， 因 此 笔 
者 将 不 再 给 出 结果 ， 而 分 析 代 码 的 第 22~34 行 的 每 一 步 操作 来 将 运行 后 的 结果 告知 读者 。 

在 第 22 行 的 内 容 中 ，writer 是 一 个 FileWriter 类 型 的 对 象 ， 此 时 文件 内 容 为 空 。 在 第 
23~25 行 处 的 onwrite(0) 函 数 中 利用 LogCat 窗口 输出 内 容 write success， 表 示 能 够 成 功 执行 写 
操作 。 再 在 第 26 行使 用 write(0 方 法 ， 同 文件 中 写 入 字符 串 some sample text， 文 件 指 针 位 于 
文件 的 结尾 处 ， 即 字母 t+ 之 后 。 










可 以 理解 为 write 方法 在 向 文件 中 写 入 内 容 时 是 一 个 个 字符 依次 写 入 的 ， 为 了 保证 能 够 
让 下 一 个 字符 顺利 地 写 在 刚刚 写 入 字符 的 后 面 ， 以 保证 写 入 字符 串 时 顺序 正确 ， 需 要 将 
文件 指针 后 移 一 位 。 因 此 ， 当 执行 完 写 操作 之 后 ， 文 件 指针 就 被 移动 到 了 新 写 入 字符 囊 
的 结尾 处 。 


接 下 来 使 用 truncate() 方 法 将 文件 截断 ， 仅 保留 文件 中 前 11 位 的 内 容 (范例 第 28 行 所 
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示 ) ， 此 时 文件 中 的 内 容 为 some sample， 文 件 指针 依然 位 于 字符 串 的 结尾 。 





在 第 30 行 ， 使 用 了 seek() 方 法 来 移动 文件 指针 到 第 4 个 字符 后 ， 此 时 文件 指针 位 于 
some 的 e 之 后 ， 再 使 用 write0) 方 法 同文 件 中 写 入 内 容 (第 32 行 )。 原 本 的 sample 字符 被 奉 
换 ， 此 时 文件 中 的 内 容 为 some different text， 文 件 指针 再 次 位 于 文本 的 结尾 处 。 


1 人 .本 ”使 用 Filesystem 获取 文件 系统 信息 


前 面 两 节 分 别 介绍 了 FileRead 类 和 FileWrite 类 的 使 用 ， 这 两 个 类 封装 了 用 于 实现 对 文件 
读 写 的 操作 ， 是 在 文件 操作 中 最 容易 被 “看 见 ” 的 操作 。 但 是 在 文件 系统 中 ， 并 不 是 所 有 的 
操作 都 是 可 被 “看 见 ” 的 ， 比 如 本 节 要 介绍 的 FileSystem 类 。 


泥 元 由 于 FileSystem 本 身 也 被 翻译 为 文件 系统 ， 而 FileSystem 类 本 身 又 是 Cordova 文件 系统 
的 一 部 分 ， 因 此 容易 被 混淆 ， 所 以 读者 每 当 遇 到 “文件 系统 ”这 4 个 字 时 要 仔细 推敲 ， 根 






据 语 境 分 析 它 的 具体 含义 。 


FileSystem 类 封装 了 当前 文件 系统 的 信息 ， 它 有 两 个 属性 name 和 root。 其 中 name 属性 
在 公开 的 文件 系统 中 是 唯一 的 ， 而 root 属性 则 包含 了 一 个 代表 当前 系统 所 在 根 目 录 的 
DirectoryEntry 对 象 。 

【范例 11-3 】 利 用 FileSystem 获取 文件 系统 信息 。 
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运行 之 后 ， 结 果 如 图 11-5 所 示 。 


index.html 
文件 系统 名 称 : persistent 


OK 





11-5 窗口 中 输出 的 文件 系统 信息 


在 FileSystem 类 中 ， 文 件 系统 的 相关 信息 分 别 被 封装 在 name 和 root 两 个 属性 中 ，name 
本 身 就 是 一 个 字符 串 型 的 对 象 ， 用 来 表示 文件 系统 的 名 称 。 


LL LL ,分 FileEntry 类 简介 


在 上 一 节 中 曾经 提 到 过 ， 在 FileSystem 类 中 封装 了 一 个 名 为 root 的 属性 ， 它 是 一 个 
FileEntry 对 象 ， 本 节 将 会 对 它 进行 详细 介绍 。 
FileEntry 实际 上 代表 文件 系统 中 的 一 个 文件 ， 以 起 到 “文件 入 口 ”的 作用 ，W3C 目录 和 
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系统 规范 对 其 进行 了 详细 的 定义 。 但 是 比较 遗憾 的 是 ，FileEntry 中 的 一 个 属性 flesystem 虽然 
在 W3C 中 被 定义 了 ， 可 是 在 Cordova 中 却 是 一 个 “无 意义 ”的 内 容 ， 因 为 它 并 不 支持 。 
表 11-5 和 表 11-6 中 分 别 是 FileEntry 类 中 的 属性 和 方法 。 
表 11-5 FileEntry 类 中 的 属性 
名 称 描述 
anpab | 从 文件 系统 的 根 目录 到 FilsEnty 的 完 束 公 


FileEntry 所 在 的 文件 系统 名 称 ， 但 是 该 属性 仅仅 被 W3C 定义 了 却 不 被 Cordova 支持 


表 11-6 FileEntry 类 中 的 方法 





方法 名 描述 
获取 文件 的 元 数据 

petParent 
ES 


通过 表格 可 以 看 出 在 FileEntry 类 中 封装 了 不 少 方法 ， 因 此 接 下 来 要 做 的 就 是 学 习 每 个 方 
法 的 用 法 。 

1. getMetadata() 方 法 

该 方法 主要 用 来 查找 文件 中 的 元 数据 ， 使 用 方法 如 下 : 
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当 该 方法 执行 成 功 后 ， 将 会 在 回调 函数 success0 中 返回 一 个 元 数据 类 型 ， 可 以 在 其 中 对 
该 数据 进行 处 理 ， 属 于 很 少 被 使 用 到 的 方法 之 一 。 





2. moveTo() 方 法 
该 方法 可 以 移动 一 个 文件 到 其 他 位 置 ， 类 似 于 “ 剪 切 ”+“ 粘 贴 ” 的 操作 。 其 使 用 方法 





在 使 用 moveTo() 方 法 时 ， 还 要 注意 以 下 三 点 : 


e@。 当 在 同一 个 文件 来 中 对 文件 进行 移动 时 (就 像 先 剪 切 但 不 切换 目录 直接 进行 粘贴 操 
作 一 样 ) 会 导致 操作 失败 ， 

@ 移动 文件 到 一 个 被 占用 的 路 径 中 会 遵 遇 失败 

@ 。 当 尝试 将 一 个 文件 移动 到 另 一 个 路 径 下 时 ， 若 该 路 径 下 有 与 该 文件 同名 文件 ， 则 原 
文件 被 移 来 的 文件 所 替换 。 


3. copyTo() 方 法 
该 方法 与 moveTo( 方 法 非常 类 似 ， 类 似 于 “复制 ” +“ 粘贴 ”操作 ， 具 体 使 用 方法 如 下 : 
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4. toURI() 方 法 
使 用 该 方法 将 返回 一 个 可 用 于 定位 文件 路 径 的 URI 对 象 ， 使 用 方法 如 下 : 





5. remove() 方 法 
该 方法 用 于 删除 一 个 文件 ， 使 用 方法 如 下 : 


6. getParent() 方 法 
该 方法 能 够 返回 当前 文件 的 父 级 目录 ， 使 用 方法 如 下 : 








该 方法 返回 的 父 级 目录 是 一 个 DirectoryEntry 类 的 对 象 ， 可 以 通过 它 来 跳 转 到 当前 文件 
的 父 目录 中 去 。 尤 其 要 注意 在 该 方法 中 即使 获取 目录 和 失败， 其 回调 函数 中 仍旧 会 返回 一 个 空 
的 DirectoryEntry 对 象 。 
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7. createWriter() 方 法 


该 方法 在 本 章 的 范例 11-2 中 曾经 被 使 用 过 ， 它 可 以 返回 一 个 “可 操作 的 ”FileWriter 对 
象 ， 从 而 由 对 文件 目录 的 操作 转移 到 对 文件 的 操作 ( 读 写 ) 中 来 ， 它 的 使 用 方法 如 下 : 


8. file() 方 法 


该 方法 可 以 返回 一 个 File 类 型 的 对 象 ， 其 中 包含 了 当前 文件 的 大 小 、 名 称 等 信息 ， 它 的 
使 用 方法 如 下 : 


在 此 方法 中 返回 的 File 类 在 Cordova 中 并 没有 被 定义 ， 因 为 W3C 中 已 经 为 JavaScript 定 
义 了 一 个 完整 的 File 类 型 ， 其 各 个 属性 以 及 描述 参见 表 11-7。 


表 11-7 File 对 象 中 的 属性 








属性 名 称 描述 

Ai 
i 
DateLastAccessed 返回 最 近 访 问 文件 或 文件 夹 的 创建 时 间 

DateLastModified 
Name ”| 设置 或 返回 文件 或 文件 夹 的 名 称 


对 于 文件 ， 以 字 节 为 单位 返回 指定 文件 的 大 小 
对 于 文件 夹 ， 以 字 节 为 单位 返回 其 中 所 包含 的 全 部 文件 及 文件 夹 的 大 小 


返回 文件 或 文件 夹 的 信息 
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.5D DirectoryEntry 类 的 简介 


DirectoryEntry 这 个 类 在 用 法 和 功能 上 与 上 一 节 介 绍 的 FileEntry 非常 类 似 ， 它 代表 了 文 
件 系统 中 的 一 个 目录 。 因 为 与 FileEntry 类 似 ， 认 真 学 习 过 上 一 节 内 容 的 读者 能 够 很 快 掌握 
DirectoryEntry 的 使 用 方法 ， 在 DirectoryEntry 类 中 包含 的 属性 和 方法 名 称 与 FileEntry 是 非常 
类 似 的 ， 下 面 将 对 该 类 中 的 方法 进行 介绍 。 

1. getMetadata() 方 法 


该 方法 用 于 碍 找 对 应 目录 中 的 元 数据 ， 使 用 方法 如 下 : 





2. moveTo() 方 法 

该 方法 用 于 移动 一 个 目录 到 其 他 位 置 ， 但 是 当 进 行 以 下 操作 时 该 方法 会 失败 : 

@ 将 原 目录 移动 到 其 子 目录 中 。 

@ 将 移动 的 目标 目录 设 为 当前 目录 (即将 目录 移动 到 当前 位 置 ， 即 使 成 功 也 相当 于 没 
有 移动 ) 。 
将 目录 移动 到 一 个 被 其 他 资源 所 占用 的 目录 下 ( 即 没有 相应 的 权限 ) 。 
移动 到 一 个 不 存在 的 目录 中 。 


多 
@ 
该 方法 的 使 用 如 下 : 
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3. copyTo() 方 法 
该 方法 用 于 将 目标 目录 复制 到 其 他 路 径 下 ， 使 用 方法 如 下 : 





与 moveTo() 方 法 类 似 ， 当 想 要 将 当前 目录 复制 到 其 子 目 录 或 者 在 当前 目录 中 进行 复制 操 
作 时 该 方法 会 失败 。 


4. toURI() 方 法 
返回 当前 目录 所 在 的 路 径 ， 使 用 方法 非常 简单 ， 如 下 : 
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5. remove() 方 法 
用 于 删除 当前 目录 ， 使 用 方法 如 下 : 





6. getParent() 方 法 
用 于 查找 当前 目录 所 在 的 目录 ， 使 用 方法 如 下 : 


不 要 亡 想 使 用 此 方法 去 获取 文件 系统 根 目录 的 父 级 目录 ， 因 为 许多 人 已 经 尝试 过 并 且 失 
败 了 。 





7. createReader() 方 法 
该 方法 用 于 创建 一 个 新 的 DirectoryReader 对 象 以 便 读 取 目 录 中 的 内 容 ， 使 用 方法 如 下 : 
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8. getDirectory() 方 法 
创建 一 个 新 的 目录 ， 使 用 方法 如 下 : 





该 方法 有 4 个 参数 ， 第 一 个 参数 在 范例 中 的 值 为 newDir， 表 示 要 创建 目录 的 名 称 ， 可 以 
写 目 录 的 完整 路 径 ， 当 仅 设 置 目 录 名 称 时 ， 目 录 被 新 建 在 当前 目录 下 。 第 二 个 参数 在 范例 中 
内 容 为 fcreate: true，exclusive: false}， 它 是 一 个 Flags 类 型 的 变量 ， 其 中 包含 了 两 个 属性 ， 用 
来 指定 在 当前 或 者 指定 目录 中 不 存在 第 一 个 参数 中 设置 的 目录 时 是 否 创建 新 的 目录 。 剩 下 的 
两 个 参数 则 是 用 来 设置 创建 目录 成 功 和 失败 时 所 调用 的 回调 函数 。 


9. getFile() 方 法 


用 于 创建 新 的 文件 或 者 但 询 一 个 已 经 存在 的 文件 ， 使 用 方法 与 getDirectory0 方 法 类 似 ， 
具体 使 用 如 下 : 





10. removeRecursively() 方 法 


该 方法 用 于 删除 一 个 目录 以 及 目录 中 的 所 有 内 容 ， 使 用 方法 如 下 : 
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remove() 方 法 也 可 以 删除 一 个 目录 ， 但 是 却 不 能 删除 目录 中 的 内 容 ， 该 方法 则 是 能 够 将 
目录 以 及 目录 下 的 全 部 内 容 一 同 删 除 。 因 此 ， 在 一 般 的 删除 操作 中 ， 用 该 方法 比 remove( 方 
法 具有 更 广泛 的 用 途 。 

那 是 不 是 remove() 方 法 就 没 用 了 呢 ? 当然 不 是 的 ， 在 许多 应 用 中 需要 判断 目录 是 否 为 
空 ， 如 果 为 空 才 可 以 进行 删除 ， 比 如 一 些 数据 的 初始 化 操作 ， 而 这 时 就 比较 适合 使 用 
remove0 而 不 是 removeRecursively()。 


DiredoryEnty 和 FilcEnty 有 着 许多 相似 的 地 方 ， 在 用 法 上 几乎 是 相同 的 ， 著 妈 它 们 是 不 
是 可 以 混用 呢 ? 当然 不 行 ， 因 为 FileEntry 中 的 方法 大 多 是 针对 单一 文件 进行 操作 的 ， 而 






DirectoryEntry 中 的 方法 则 大 多 是 针对 整个 目录 的 。 


1 1 .6 使 用 FileTransfer 向 服务 器 上 传 文件 


与 传统 的 “单机 ”应 用 相 比 ， 在 互联 网 时 代 被 用 户 所 喜闻乐见 的 还 是 一 些 具 有 更 强 交 互 
性 的 社交 类 应 用 。 在 一 些 办 公 应 用 中 为 了 实现 数据 的 备份 ， 也 需要 将 一 些 文件 上 传 到 服务 器 
进行 保存 。 这 样 的 话 仅 靠 文 件 系 统 的 操作 就 不 好 用 了 ， 急 需 一 种 新 的 有 效 的 方法 来 实现 将 本 
机 文件 上 传 到 网 络 的 功能 。 

本 节 要 介绍 的 FileTransfer 类 ， 可 以 实现 从 设备 回 服务 器 上 传 文件 的 操作 ， 它 只 包含 了 一 
个 方法 : upload()。 

在 使 用 FileTransfer 之 前 需要 先 添加 插件 :cordova plugin add https://github.com/apache/cordova- 


plugin-file-transfer. git。 
【范例 11-4】 使 用 FileTransfer 类 将 本 地 文件 上 传 到 服务 器 。 
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下 面 是 对 范例 代码 的 讲解 : 

在 第 12~17 行 ， 使 用 了 camera 对 象 来 操纵 摄像 头 获取 一 张 照片 ， 该 方法 在 下 一 章 会 介 
绍 ， 此 时 可 简单 忽略 ， 只 需 知 道 是 获取 了 一 个 图 片 文 件 即 可 。 

第 21~36 行 则 是 实现 上 传 文件 功能 的 核心 代码 ， 在 第 33 行 中 ， 声 明了 一 个 新 的 
FileTransfer 类 型 的 对 象 人 ft， 然后 直接 执行 upload() 方 法 来 实现 文件 的 上 传 。 该 方法 中 一 共有 5$ 
个 参数 ， 对 它们 的 解释 如 图 11-6 所 示 。 





11-6 ”upload() 方 法 的 使 用 说 明 


其 中 ，imageURI 是 在 通过 摄像 头 获取 图 片 时 得 到 的 ， 在 范例 第 12 行 中 可 以 看 到 
uploadPhoto 在 这 里 被 调用 ， 而 imageURI 正 是 它 的 参数 。 在 第 二 个 参数 
encodeURI("http://202.118.89.139/") 中 ，http://202.118.89.139/ 是 图 片 被 上 传 的 目标 服务 器 地 
址 ， 可 以 利用 AppServ 或 者 Xampp 等 软件 在 计算 机 上 快速 搭建 。encodeURIO 是 JavaScript 中 
定义 的 一 个 方法 ， 用 来 将 字符 串 转 化 为 合法 的 URL 对 象 。win 和 fail 分 别 是 在 upload() 方 法 
执行 后 对 执行 结果 成 功 和 失败 时 调用 的 回调 函数 名 称 ， 这 种 方法 在 Cordova 中 非常 弟 见 。 最 
后 一 个 参数 options 非常 重要 ， 它 是 一 个 FileUploadOptions 类 型 的 对 象 ， 用 来 指定 文件 被 上 
传 时 的 各 种 参数 ， 表 11-8 中 是 FileUploadOptions 各 个 属性 的 名 称 及 含义 。 
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表 11-8 FileUploadOptions 类 的 属性 
属性 名 称 说 明 


表单 元 素 的 name 值 ， 默 认 值 为 fle 
文件 被 上 传 到 服务 器 后 被 保存 的 文件 名 ， 默 认为 flejpg 


被 上 传 文件 的 mime 类 型 ， 默 认为 image/jpeg 
通过 http 请 求 发 送 给 服务 器 的 一 系列 键 值 对 


数据 是 否 分 块 上 传 ， 默 认为 tme 





从 表 11-8 中 可 以 看 出 ， 范 例 第 22~33 行 是 在 执行 上 传 操 作 前 先 设置 了 上 传 文件 属性 的 ， 
即 以 照片 在 设备 中 保存 的 默认 名 称 上 传 到 服务 器 中 。 


1 下。 7 。 其 他 与 文件 系统 相关 的 类 


本 章 介 绍 了 Cordova 中 关于 文件 操作 的 好 多 类 ， 而 且 还 有 好 几 个 类 没有 介绍 ， 不 知道 各 
位 读者 对 此 有 什么 看 法 ， 笔 者 在 学 习 这 部 分 内 容 时 研究 了 好 久 才 大 概 明 日 了 这 些 类 之 间 的 关 
系 ， 最 终 还 是 靠 实践 才 渐渐 摸索 出 了 一 些 门道 。 为 此 ， 本 节 介 绍 Cordova 文件 系统 中 剩余 的 
几 个 类 ， 同 时 做 一 个 类 似 “ 导 学 ”的 介绍 ， 使 读者 能 够 对 于 怎样 将 这 些 类 联系 起 来 有 一 个 清 
晰 的 认识 。 

有 一 种 叫做 “密室 逃生 ”的 宇内 探险 游戏 ， 一 般 会 将 几 个 “冒险 者 ” 关 在 一 个 封闭 的 小 
房间 内 ， 然 后 游戏 的 玩家 可 能 会 在 “密室 ”的 各 个 角落 找到 一 些 诸如 钥匙 、 谜 题 或 者 上 痢 锁 
的 箱子 之 类 的 物件 ， 然 后 根据 提示 又 能 找到 新 的 钥匙 或 者 箱子 等 ， 一 环 套 看 一 环 。 图 11-7 是 
一 个 线 上 密室 逃生 游戏 的 截图 。 





11-7 密室 逃生 游戏 


其 实 Cordova 的 文件 系统 也 与 密室 逃 生 游戏 非 第 类 似 ， 部 是 要 通过 茶 个 “物品 ”来 获取 
男 一 个 “物品 ”， 而 徘 厦 新 获得 的 这 个 “物品 ”又 能 获得 新 的 “物品 ”， 这 样 依次 循环 下 去 
就 像 解 谋 一 样 最 终 才 能 达到 目的 ( 逃 出 密室 或 者 是 实现 对 文件 的 条 种 操作 )〉。 
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在 密室 逃生 游戏 中 可 能 出 现 的 东西 有 很 多 ， 比 如 钥 是 、 盒 子 、 水 果 刀 甚至 是 一 卷 卫 生 纸 
等 ， 而 在 Cordova 的 文件 系统 中 ， 用 到 的 东西 就 比较 简单 ， 只 能 是 式 个 类 或 者 对 象 。 


各 笔者 就 先 做 一 个 假设 ， 因 为 Cordova 中 的 类 和 对 象 的 总 数 要 比 密室 逃生 中 东西 的 种 类 少 





很 多 ， 因 此 学 好 Cordova 中 的 文件 操作 比 密室 逃生 要 简单 许多 。 


笔者 列 出 Cordova 中 与 文件 操作 相关 的 所 有 类 ， 并 将 它们 分 为 “介绍 过 的 ”和 “ 没 介 绍 
过 的 ”两 组 。 
在 之 前 介绍 过 的 类 有 : 


FileReader 
FileWriter 
FileSystem 
FlleTransfer 
FileEntry 
DirectoryEntry 
DirectoryReader 
FileUploadOptions 
File 
FileTransfrtOptions 


下 向 这 些 类 在 之 前 没有 具体 介绍 过 : 


FileError 
FileTransferError 
FileUploadResult 
Flags 
LocalFileSystem 
Metadata 


笔者 将 先 对 这 些 之 前 没有 介绍 过 的 类 进行 简单 的 介绍 。 
FileError 对 象 用 来 记录 Cordova 文件 系统 操作 的 一 些 错误 信息 。 在 Cordova 中 ， 任 何 一 
个 文件 操作 发 生 错误 时 ， 都 会 在 回调 图 数 中 返回 一 个 FileError 类 的 对 象 ， 用 以 告知 开发 者 究 
竟 是 发 生 了 什么 错误 导致 了 操作 的 失败 。 主 要 错误 原因 如 表 11-9 所 示 。 
表 11-9 FileError 可 以 表达 的 错误 类 型 


错误 名 称 说 阴 


没有 找到 相应 的 文件 或 者 目录 


终止 操作 发 生 钳 误 
文件 不 可 读 


182 








第 11 章 Cordova 中 的 文件 操作 


( 续 表 ) 
错误 名 称 说 明 


类 型 本 错 训 
创建 忆 经 存在 的 路 和 


SECURITY ERR 其 他 错误 
FileTransferError 类 与 FileError 类 类 似 ， 当 文件 上 传 发 生 错 误 时 会 返回 一 个 
FileTransferError 类 的 对 象 给 回调 函数 ， 它 所 能 表达 的 错误 类 型 比较 少 ， 只 有 三 种 ， 如 表 
11-10 所 示 。 





表 11-10 ”FileTransferError 可 以 表达 的 错误 类 型 
错误 名 称 说 明 


文件 未 找到 
这 接 铺 训 


之 所 以 FileTransferError 类 比 FileError 类 所 能 够 表达 的 错误 类 型 在 数量 上 要 少 很 多 ， 主 
要 是 由 于 FileError 对 所 有 的 文件 操作 都 产生 效果 ， 而 FileTransferError 仅 针 对 文件 上 传 
有 效 。 





FileUploadResult 的 作用 与 FileTransferError 又 非常 类 似 ， 只 不 过 它 发 生 作 用 是 在 上 传 文 
件 成 功 时 返回 上 传 消息 ， 它 也 包含 了 三 个 参数 ， 如 表 11-11 所 示 。 


表 11-11 FileUploadResult 所 附带 的 参数 
参数 名 称 说 明 


上 传 文 件 所 发 送 的 总 字 节 数 


HTTP 响应 代码 
HTTP 响应 





类 Flags 和 Metadata 的 内 容 其 实在 前 徊 的 章节 已 经 提 到 过 ，Flags 作为 DirectoryEntry 对 
象 的 getFile0 和 getDirectory() 方 法 的 参数 使 用 ， 包 含 了 create 和 exclusive 两 组 属性 ， 用 来 指 
示 当 要 获取 的 文件 在 文件 不 存在 时 是 否 由 系统 创建 一 个 新 的 文件 。 
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按照 官方 文档 的 说 法 ，Metadata 代表 一 个 文件 或 者 是 目录 的 状态 信息 ， 但 是 就 目 前 来 看 
这 些 状态 信息 仅 有 modificationTime (用 来 记录 文件 或 目录 的 最 后 修改 时 间 〉 这 一 个 属性 ， 也 
许 在 今后 Cordova 的 开发 团队 会 为 它 加 入 新 的 内 容 ， 但 是 就 目前 来 说 这 个 类 显得 有 些 鸡 肋 。 


目前 来 说 Cordova 中 有 不 少 类 或 者 是 方法 确实 由 于 缺乏 实用 性 而 显得 它 在 设计 上 魏 似 不 
大 合理 ， 但 是 通过 这 种 “糟糕 的 ”设计 还 是 能 发 现实 际 上 Cordova 预 留 了 不 少 供 将 来 扩展 
的 缺口 。 因 此 ， 我 们 有 理由 相信 Cordova 最 终 会 是 一 款 比 目前 更 加 强大 和 好 用 的 开发 杠 
架 。 





最 后 再 说 说 LocalFileSystem 类 ， 这 个 类 在 之 前 的 范例 中 己 经 被 使 用 过 【范例 11-2 的 第 
12 行 )。 该 类 可 以 用 来 定义 所 申请 的 文件 系统 权限 是 否 为 “持久 化 的 ”在 范例 11-2 中 就 
是 此 种 用 法 ) 。 同 时 它 还 包含 了 两 种 方法 requestFileSystem (用 来 获取 一 个 FileSystem 类 对 
象 ) 和 resolveLocalFileSystemURI (通过 本 地 URI 参数 检索 DirectoryEntry 或 FileEntry) 。 

下 和 面 再 回 到 本 章 开 头 的 范例 11-1， 虽 然 当 时 笔者 已 经 对 代码 中 的 一 些 内 容 进行 了 介绍 ， 但 是 
在 本 节 中 笔者 将 再 以 游戏 “密室 逃生 ”中 的 一 些 观 点 来 囊 领 读者 重新 分 析 一 下 它 的 内 容 。 

为 了 方便 读者 阅读 ， 现 选 出 范例 11-1 中 部 分 代码 如 下 : 
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想象 你 现在 被 关 在 一 个 房间 里 ， 被 告知 在 这 个 房间 里 藏独 一 本 书 ， 在 这 本 书 中 会 有 让 你 
逃 出 这 个 房间 的 咒语 。 这 本 书 怠 是 在 范例 中 要 被 读 取 的 文件 〈fle， 在 第 19~27 行 中 ) ， 而 文 
件 的 内 容 就 是 能 够 让 你 逃 出 房间 的 咒语 。 

可 是 ， 按 照 游戏 的 设 定 ， 这 本 书 不 是 谁 都 能 碰 的 ， 没 有 “神器 ”在 喘 的 人 如 果 碰 了 这 本 
书 就 会 立刻 化 成 血水 《〈“ 可 能 是 前 一 段 时 间 受 各 种 版 本 《封神榜 》 的 影响 ， 结 果 比 喻 的 这 么 恶 
心 ) 。 于 是 现在 就 需要 找到 一 个 “ 神 占 ”来 帮助 我 们 接触 到 这 本 书 。 这 个 “ 神 右 ”就 是 之 前 
介绍 过 的 FileReader， 它 的 作用 就 是 将 一 个 file 类 的 对 象 变 成 “可 读 的 ”。 比 如 范例 第 29~36 
行 就 是 这 样 的 作用 。 

是 不 是 这 样 就 能 够 逃 出 “密室 ”了 了 呢 ? 当然 不 是 ， 因 为 不 管 是 “神器 ”还 是 带 有 融 语 的 
书 都 是 虚无 绎 织 的 传说 ， 不 是 谁 都 能 找到 的 。 因 此 ， 为 了 能 够 找到 它们 ， 就 必须 要 有 茶 种 线 
索 。 比 如 第 6 行 申请 了 文件 系统 的 权限 ; 而 第 9~12 行 中 获取 文件 句柄 就 好 比 是 找到 了 冒险 
的 地 图 ， 这 样 才能 够 最 终 找到 书 〈file) 。 






i i .8 小 结 


本 章 介 绍 了 Cordova 中 的 文件 系统 ， 通 过 它 可 以 实现 对 手机 中 的 文件 和 目录 进行 读 、 写 
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等 操作 。 但 是 请 读者 注意 ， 由 于 JavaScript 脚本 本 身 运 行 速度 的 局 限 性 ， 还 是 尽量 不 要 去 用 
它 来 开发 一 些 诸 如 “文件 管理 器 ”或 者 是 “小 说 阅读 器 ”这 样 资源 占用 比较 大 的 功能 。 那 么 
是 不 是 说 Cordova 的 文件 处 理 功 能 就 一 无 是 处 了 呢 ?” 当 然 不 是 ，Cordova 的 文件 处 理 功 能 在 
实现 一 些 简单 的 操作 〈 比 如 图 片 资 源 的 上 传 、 下 载 还 有 简单 的 读 写 ， 如 在 音乐 播放 器 中 读 取 
LRC 文件 ) 时 相对 于 原声 SDK， 还 是 有 很 大 的 优势 的 。 在 实际 开发 时 一 定 要 扬长 避 短 ， 选 择 
最 适合 自己 的 方法 。 
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在 本 书 的 第 10 章 中 ， 曾 经 介绍 过 一 个 Media 类 ， 通 过 它 可 以 实现 对 音频 的 录制 和 播放 等 
操作 。 但 是 媒体 文件 有 很 多 ， 并 不 止 有 音频 一 种 。 那 么 其 他 类 型 的 媒体 文件 ( 比如 图 片 、 视 
频 ) 又 要 通过 何 种 方式 来 捕获 呢 ? Cordova 专门 提供 Capture 对 象 来 实现 系统 对 图 像 、 音 频 和 


视频 资源 采集 的 调用 。 





本 草 的 主要 知识 点 有 : 

@ Capture 对 象 以 及 使 用 Capture 对 象 进 行 操 作 时 会 调用 的 各 种 参数 。 
@ 使 用 captureAudio() 方 法 采集 音频 并 上 传 到 服务 器 。 

@ 使 用 captureImage() 方 法 采集 图 片 文件 并 上 传 到 服务 器 。 

@ 使 用 captureVideo() 方 法 采集 视频 文件 并 上 传 到 服务 器 。 


1 之 .1 声音 的 采集 


Capture 在 英文 中 包含 了 俘虏 、 捕 获 等 含义 ， 在 实际 使 用 中 也 可 以 近似 地 被 翻译 为 采集 。 
由 此 就 可 以 联想 到 ， 它 没有 Media 类 中 已 经 学 习 过 的 播放 、 和 暂停 等 功能 ， 它 所 能 实现 的 只 有 
录制 或 者 摄制 功能 。 那 么 它 与 Media 类 的 录音 功能 又 有 什么 区 别 呢 ? 接 下 来 将 以 一 个 使 用 
Capture 对 象 来 进行 声音 采集 的 例子 对 它 做 出 说 明 。 
首先 在 命令 行 执 行 命令 添加 相应 插件 : cordova plugin add cordova-plugin-media-capture。 


【范例 12-1】 利 用 Capture 对 象 实现 音频 的 采集 。 
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运行 之 后 的 界面 如 图 12-1 所 示 ， 点 击 屏幕 上 方 的 “开始 录音 ”按钮 ， 设 备 开始 进行 音频 
的 采集 ， 可 以 在 LogCat 的 日 志 中 观察 音频 被 上 传 的 情况 ， 如 图 12-2 所 示 。 在 观察 到 日 志 
提示 “上 传 成 功 ” 之 后 也 可 以 直接 碍 看 服务 器 中 是 否 被 上 传 了 音频 文件 。 





12-1 程序 运行 后 的 界面 图 12-2 点 击 “ 开 始 录音 ”后 的 界面 
相信 读者 已 经 得 到 了 想 要 的 结果 ， 不 过 不 知道 读者 有 没有 发 现 两 个 非常 诡异 的 问题 ? 
第 一 : 在 本 例 中 并 没有 加 入 “停止 录音 ”的 功能 ， 系 统 是 怎么 知道 何 时 结束 录音 的 ， 难 
道 是 作者 巧 记 了 ? 
第 二 : 为 什么 会 有 两 次 “上 传 成 功 ” 的 提示 ? 难道 这 段 范例 里 面 加 入 了 什么 窃取 个 人 隐 
私 的 代码 吗 ? 
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当然 不 是 这 样 的 ， 不 管 之 前 有 没有 注意 到 这 两 个 问题 ， 通 过 对 范例 代码 的 讲解 ， 读 者 很 
快 就 会 明白 这 是 为 什么 了 。 

首先 ， 在 页 面 中 定义 了 一 个 按钮 ， 并 为 它 加 入 了 点 击 事件 onclick="myptureAudio0;"， 如 
范例 第 59 行 所 示 。 而 在 前 面 的 JavaScript 中 ， 一 切 的 操作 也 都 是 从 上 自 定义 函数 
myptureAudio() 开 始 的 。 

在 这 个 目 定 义 函数 中 ， 只 执行 了 一 步 操 作 : 


它 的 作用 是 调用 capture 对 象 中 的 captureAudio0) 方 法 开始 对 音频 进行 采集 工作 ， 其 中 
captureSuccess 和 captureError 分 别 是 采集 成 功 和 失败 时 会 执行 的 回调 函数 。 可 是 除了 这 两 个 
图 数 名 以 外 ， 在 captureAudio() 方 法 中 还 多 出 了 一 个 参数 {limit:2}。 再 联想 到 之 前 竞 然 将 录音 
采集 的 结果 上 传 了 两 次 ， 有 的 读者 就 会 猜想 了 ， 会 不 会 是 它 的 原因 呢 ? 

没 错 ! 真相 就 是 这 样 的 ， 正 是 该 属性 使 得 音频 被 上 传 了 两 次 ， 可 是 为 什么 要 上 传 两 次 
呢 ? 答案 只 有 一 个 ， 那 就 是 一 共 采 集 了 两 段 音频 。 现 在 将 展开 这 个 参数 进行 介绍 。 

Cordova 对 该 方法 的 定义 如 下 : 


首先 ， 在 capture 之 前 加 入 了 一 段 内 容 navigatordevice， 这 说 明 capture 是 作为 一 个 全 局 
变量 被 封装 在 navigator 中 使 用 的 ， 因 此 在 使 用 时 不 需要 单独 对 它 进行 定义 。 接 下 来 两 个 回调 
图 数 captureSuccess 和 captureError 分 别 在 采集 成 功 和 失败 时 被 调用 ， 当 它们 被 调用 时 会 默认 
接收 到 类 型 为 CaptureCB 或 CaptureErrorCB 的 对 象 ， 用 以 保存 采集 到 的 信息 。 而 第 三 个 参数 
是 可 选 的 ， 它 是 一 个 CaptureAudioOptions 类 型 的 对 象 ， 包 含 了 对 音频 采集 时 一 些 参数 的 设 
置 ， 它 包含 的 三 个 属性 如 表 12-1 所 示 。 


表 12-1 CaptureAudioOptions 类 中 的 属性 





说 阴 


采集 音频 数量 的 最 大 值 ， 默 认 值 为 1 


选 定 的 音频 格式 ， 该 属性 在 早期 版 本 中 使 用 ， 现 已 被 取消 





属性 名 
duration | 采集 时 


也 就 是 说 ， 范 例 中 的 第 11 行 实际 上 可 以 改写 成 如 下 的 样子 : 
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OPtions) ; 

但 是 要 注意 的 是 ， 安 卓 系统 并 不 提供 对 duration 属性 的 支持 ， 因 此 Cordova 将 会 根据 系 
统 提供 一 个 默认 的 采集 时 间 ， 然 后 开发 者 可 以 通过 设置 limit 属性 的 值 来 变相 地 改变 采集 时 
间 。iOS 系统 则 不 提供 对 limit 属性 的 文 持 ， 使 得 采集 的 文件 数量 仅 能 为 1。 

十 音频 采集 成 功 之 后 就 进入 到 了 函数 captureSuccess 之 中 ， 系 统 会 自动 将 采集 到 的 数据 
存 入 一 组 mediaFiles 类 型 的 对 象 ， 它 封装 了 采集 到 的 媒体 文件 的 一 系列 属性 ， 如 表 12-2 所 
示 。 

表 12-2 mediaFiles 中 的 属性 


属性 名 说 明 
name | 记录 被 末 集 信息 文件 的 文件 名 (不 包 人 中公) 
记录 被 采集 信息 文件 的 文件 名 包含 路 径 ) 

文件 的 MIME 类 型 


文件 最 后 被 修改 的 时 间 ， 即 采集 完成 的 时 间 


文件 的 大 小 
这 时 被 作为 参数 传递 到 captureSuccess 之 中 的 并 不 是 一 个 单一 的 对 象 而 是 一 个 数组 ， 
为 limit 属性 存在 的 原因 ， 被 采集 记录 下 的 文件 不 止 有 一 个 ， 因 此 需要 有 数组 来 保存 它们 。 范 
例 第 17~19 行驶 是 通过 所 有 历 的 方法 来 实现 这 些 文件 上 传 的 。 





在 论坛 上 有 网 友 曾 经 反映 过 不 知道 该 如 何 使 用 采集 来 的 数据 ， 因 为 在 官方 文档 中 没有 这 
方面 的 介绍 。 其 实 这 个 问题 非常 简单 ， 只 要 为 HTML 对 象 引 入 被 采集 的 资源 就 可 以 了 ， 


比如 本 节 中 介绍 到 的 音频 文件 就 可 以 直接 通过 <audio src="song.wav" controls="controls"> 
方式 来 使 用 ， 而 获取 资源 的 方法 则 是 采用 mediaFiles 中 的 fullpath 来 实现 。 





本 节 的 最 后 来 总 结 一 下 Capture 中 对 音频 的 采集 与 Media 对 象 中 录制 声音 的 区 别 。 

首先 ， 在 Media 对 象 中 录制 的 音频 仅 能 播放 而 无 法 像 Capture 中 一 样 作为 文件 被 保存 下 
来 ， 更 别 说 上 传 了 。 其 次 ，Media 对 象 录制 的 音频 可 以 选择 随时 结束 录制 ， 而 Capture 则 必须 
提前 设 定好 录制 的 时 间 。 比 如 要 做 微 信 这 样 可 以 将 声音 进行 传递 的 应 用 ， 使 用 Capture 对 象 
会 比较 方便 进行 上 传 ， 而 如 果 是 简单 的 录音 回放 ， 比 如 学 习 英 语 纠正 发 音 的 应 用 ， 则 更 适合 
使 用 Media 对 象 。 


1 2 .2 图 像 信息 的 采集 


介绍 完了 音频 的 采集 ， 本 节 将 继续 介绍 一 个 用 户 都 豆 闻 乐 见 的 功能 一 一 图 像 的 采集 ， 也 
就 是 常 说 的 招 照 。 除 了 实现 将 采集 到 的 图 像 上 传 到 服务 器 之 外 ， 本 节 的 范例 中 还 要 展示 如 何 
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将 采集 到 的 图 像 显 示 出 来 ， 具 体 实现 方法 如 范例 12-2 所 示 。 
【范例 12-2】 图 像 文 件 的 采集 及 使 用 。 
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运行 后 的 界面 如 图 12-3 所 示 ， 其 中 上 方 Cordova 的 Logo 是 打包 在 asset/www 目录 下 的 
图 片 Cordova.jpg。 点 击 屏 幕 中 下 方 的 “采集 ”按钮 ， 系 统 将 先 跳 转 到 拍照 界面 利用 摄像 头 采 
集 图 像 信 息 并 上 传 ， 最 终 显示 在 原本 Cordova Logo 的 位 置 ， 如 图 12-4 所 示 。 





该 范例 所 使 用 的 方法 与 范例 12-1 极其 的 类 似 ， 因 此 这 里 不 再 对 范例 的 内 容 做 过 多 的 讲 
解 。 唯 一 新 加 入 的 内 容 是 ， 在 第 17 行 中 将 获得 的 图 片 路 径 加 入 到 了 HTML 页 面 的 img 标签 
中 ， 与 在 JavaScript 中 的 使 用 方法 几乎 一 致 。 与 之 类 似 的 是 在 下 一 节 中 将 要 采集 的 视频 文 
件 ， 也 可 以 用 类 似 的 方式 展示 在 页 面 上 。 

另外 ， 在 实际 操作 中 ， 点 击 “ 采 集 ” 按 钮 之 后 ， 手 机 将 会 先 跳 转 到 拍照 的 页 面 ， 点 下 扫 
照 后 才 会 再 跳 回 图 12-4 所 示 的 界面 ， 包 括 在 下 一 节 中 要 介绍 的 视频 采集 也 有 类 似 的 缺陷 。 

相信 读者 都 玩 过 人 人 网 或 者 是 QQ 空间 。 手 机 版 的 人 人 网 和 QQ 至 间 都 有 一 个 “拍照 上 
传 ” 的 功能 就 可 以 这 样 实现 。 

在 对 声音 进行 采集 时 ， 使 用 了 一 个 用 来 设置 采集 参数 的 CaptureAudioOptions 对 象 ， 在 实 
现 对 图 片 的 采集 功能 时 同样 也 会 用 到 一 个 类 似 的 参数 ， 那 就 是 CaptureImageOptions， 它 的 属 
性 如 表 12-3 所 示 。 


表 12-3 ” CapturelmageOptions 中 的 属性 
属性 名 称 说 明 


il | 和 h 提 





le | 杀人 图 片 保存 的 格式 
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1 了 .视频 的 采集 


介绍 完了 Cordova 对 音频 和 图 像 文 件 的 采集 后 ， 本 节 就 来 介绍 Capture 的 最 后 一 个 功 
能 ， 即 对 视频 的 采集 。 范 例 12-3 是 采集 视频 并 将 视频 发 送 到 服务 器 的 一 个 例子 。 
【范例 12-3 】Capture 对 视频 的 采集 。 
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运行 后 结果 如 图 12-5 所 示 ， 点 击 屏幕 项 部 的 “采集 ”按钮 可 以 跳 转 到 录像 界面 开始 视频 
的 采集 ， 之 后 可 以 在 LogCat 中 看 到 “上 传 成 功 ” 的 提示 。 





12-5 ”范例 运行 后 的 界面 


与 图 像 采 集 功 能 类 似 ， 该 功能 在 进行 一 些 传统 摄像 应 用 的 开发 时 会 显得 非常 无 力 。 但 是 
在 进行 一 些 社交 应 用 的 开发 时 ， 比 如 类 似 微 信 对 讲 功能 的 视频 对 讲 器 或 者 上 传 视 频 等 ， 也 还 
是 不 错 的 。 

范例 第 11 行使 用 参数 CaptureVideoOptions 对 视频 的 采集 进行 设置 ， 它 的 各 项 属性 与 
CaptureAudioOptions 相同 ， 因 此 可 参考 表 12-1 的 内 容 。 





12.4 鸡肋 的 MediaFileData 对 象 


在 Cordova 的 采集 功能 中 还 有 一 个 对 象 是 MediaFileData， 它 保存 了 被 采集 到 的 媒体 文件 
所 保存 的 数据 ， 主 要 包含 了 codecs《〈 音 频 或 视频 文件 的 格式 ) 、bittrate〈 音 频 或 视频 文件 的 
比特 率 ) 、height〈 图 像 或 视频 的 高 度 ， 单 位 为 像素 ) 、width 图像 或 视频 的 宽度 ， 单 位 为 
像素 ) 、duration 〈 音 频 或 视频 的 长 度 ) 。 
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这 个 对 象 貌似 非常 有 用 ， 但 是 这 实在 不 是 一 个 可 徘 的 对 象 。 表 12-4 中 是 安 持 和 iOS 对 其 
属性 的 支持 情况 。 


表 12-4 安 卓 和 ioOS 对 MediaFileData 对 象 中 属性 的 支持 情况 





男 外 它 的 各 个 属性 在 黑 礁 系统 中 是 完 完全 全 地 不 支持 。 所 以 说 MediaFileData 对 象 是 一 个 
非常 不 徘 证 的 对 象 ， 在 实际 开发 中 要 避免 使 用 它 ， 或 者 在 使 用 时 做 好 容错 处 理 。 


县 元 虽然 说 Cordova 一 直 标 榜 能 做 到 一 次 部 署 7 大 平台 ， 且 完全 兼容 ， 可 是 实际 上 还 有 许多 
细节 不 够 完备 ， 在 兼容 性 无 法 得 到 本 质 性 改变 的 前 提 下 ， 就 需要 开发 者 发 扬 不 怕 失 败 的 
精神 去 多 次 尝试 ， 找 到 最 好 的 方案 来 避免 这 些 问题 。 比 如 针对 不 同 的 平台 进行 微小 的 改 






动 或 者 是 避免 去 使 用 一 些 不 完善 的 API。 


12.5 小 结 


本 章 介 绍 了 Cordova 中 Capture 对 象 的 使 用 方法 ， 由 于 和 它 本 身 是 一 个 全 局 对 象 ， 因 此 在 
学 习 时 会 比较 容易 上 手 ， 不 过 它 并 不 具备 十 分 完善 的 用 户 体验 和 兼容 性 ， 这 也 导致 了 想 要 用 
好 它 并 不 是 一 件 非常 容易 的 事情 。 但 是 总 体 来 说 ， 只 要 能 够 因地制宜 地 设计 开发 方案 ， 
Capture 对 和 象 还 是 能 够 市 来 不 少 恢 喜 的 。 
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对 本 地 存储 功能 的 支持 是 HTML 5 的 一 大 进步 ， 同 样 地 ， 在 Cordova 中 也 没有 忽略 这 一 
功能 。 在 Cordova 中 ，Storage 类 基于 W3C Web SQL Database Specification 提供 了 设备 对 本 地 
存储 的 访问 。 在 许多 设备 中 ， 这 些 功 能 都 是 使 用 HTML 5 的 本 地 存储 功能 来 实现 的 ， 只 有 少 
数 设 备 由 于 不 能 很 好 地 支持 HTML 5 的 一 些 属性 ， 而 不 得 不 靠 一 些 搬 层 的 功能 来 实现 。 


本 章 的 主要 内 容 有 : 

@ HTML 5 以 及 Cordova 中 本 地 存储 系统 的 概念 以 及 使 用 。 
@ 在 Cordova 中 如 何 打 开本 地 存储 功能 。 

@ 在 Cordova 中 利用 SQL 语言 实现 对 本 地 存储 功能 的 调用 。 
@ Cordova 本 地 存储 中 键 值 对 的 配对 方法 。 


HTML 5 中 的 本 地 存储 功能 


作为 开发 者 必须 要 有 一 个 意识 ， 那 就 是 在 设备 上 看 到 的 内 容 实 际 上 都 是 以 某 种 形式 被 下 
载 下 来 的 ， 即 使 无 法 指出 它 被 存储 在 哪个 位 置 。 比 如 每 天 浏览 的 网 页 ， 即 使 是 在 重复 浏览 昨 
晚 刚 刚 看 过 的 页 面 ， 而 且 内 容 与 之 前 完全 相同 ， 也 无 法 避免 重新 将 该 页 面 的 内 容 “ 下 载 ” 一 
通 的 命运 。 

但 这 并 不 意味 着 所 有 信息 都 需要 被 重复 下 载 ， 比 如 每 天 要 使 用 的 微 信 或 者 QQ， 会 将 一 
些 消 奶 保存 在 本 地 而 仅仅 更 新 一 些 新 增加 的 内 容 。 比 如 美女 刚刚 发 来 的 一 张 突 脸 ， 这 大 概 束 
是 本 地 存储 在 日 常生 活 中 最 被 人 们 所 熟知 的 一 个 应 用 了 。 那 么 本 地 存储 究竟 是 什么 呢 ? 本 章 
将 抛 开 Cordova 而 先 对 本 地 存储 做 一 个 简单 的 介绍 。 





13.1.1 为 什么 需要 本 地 存储 

在 2011 年 ， 笔 者 曾经 为 某 大 学 开发 过 一 款 分 享 校园 新 闻 的 手机 应 用 。 由 于 当时 移动 开发 
还 没有 现在 这 么 普及 ， 因 此 虽然 当时 做 出 的 样品 非常 粗糙 还 是 得 到 了 校方 的 高 度 肯 定 ， 我 也 
为 此 洋洋 自得 了 很 长 时 间 。 

但 是 不 久之 后 ， 翡 剧 发 生 了 。 有 一 天 ， 该 学 校 的 负责 人 说 由 于 笔者 当时 仅仅 是 对 校园 网 
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上 的 信息 进行 了 简单 的 抓 取 ， 学 生 们 每 次 想 看 通知 都 得 将 全 部 的 通知 都 下 载 一 忆 ， 非 常 麻 烦 
而 且 浪费 流量 。 因 此 ， 要 求 我 对 原本 的 应 用 进行 修改 。 

由 此 笔者 想到 了 一 个 办 法 ， 就 是 在 程序 中 加 入 一 个 标志 变量 ， 用 来 存储 最 新 的 通知 id， 
并 将 已 经 下 载 好 的 通知 保存 在 本 地 。 这 样 每 次 查询 通知 时 就 只 需要 更 新 新 发 布 的 通知 了 。 我 
的 这 一 做 法 再 次 得 到 了 校方 的 肯定 ， 一 场 危 机 束 这 么 化 解 了 。 

后 来 笔者 就 想到 了 日 前 所 浏 览 到 的 网 页 ， 不 管 是 不 是 已 经 浏览 过 的 内 容 ， 每 次 再 去 浏览 
时 束 需 要 重新 下 载 ， 这 就 造成 了 很 大 的 浪费 。 有 没有 办 法 来 避免 这 种 浪费 呢 ? 

有 人 提出 了 使 用 cookie 方法 ， 此 方法 比较 彰 见 的 应 用 就 是 在 一 些 网 站 登录 之 后 再 次 访问 
时 能 够 保存 用 户 的 登录 状态 ， 甚 至 是 记录 下 之 前 曾经 访问 过 哪些 网 站 。 当 然 也 有 些 网 站 会 利 
用 cookie 来 获取 用 户 感 兴趣 的 事务 ， 并 以 此 为 依据 来 打 广 告 。 

当然 ， 使 用 cookie 来 记录 一 些 本 地 信息 是 非 闸 不 方便 而 且 不 安全 的 ， 那 么 有 没有 什么 方 
法 能 够 既 安 全 又 方便 地 实现 本 地 存储 功能 呢 ? 


13.1.2 HTML 5 的 本 地 存储 

虽然 说 本 地 存储 功能 是 HTML 5 新 功能 中 不 可 缺少 的 一 部 分 ， 但 是 遗憾 的 是 ， 一 般 所 说 
的 HTML 5 本 地 存储 ， 即 Web Storage 规范 ， 却 并 不 是 HTML 5 规范 中 的 一 部 分 。 原 本 属于 
HTML 5 规范 的 它 由 于 不 为 人 知 的 原因 被 从 HTML 5 中 分 离 了 出 来 。 

除了 Web Storage 规范 ，HTML 5 中 的 本 地 存储 还 有 Web SQL Database 和 IndexedDB 两 
种 。 其 中 Web SQL Database 使 开发 者 可 以 在 Web 中 方便 地 直接 使 用 数据 库 ， 这 一 点 让 许多 
开发 者 爱不释手 。 相 比 之 下 IndexedDB 受到 了 更 多 的 冷落 ， 目 前 仅 被 Firefox 支持 的 它 ， 甚 
至 被 Mozila 表示 永远 不 会 使 用 。 
| 


站 常 可 以 的 是 ，Web SQL Database 事 灾 上 是 一 个 已 经 被 废除 了 的 标准 ， 因 为 世界 上 根本 
不 存在 叫做 SQL 的 标准 化 查询 语言 ， 人 们 平常 所 说 的 SQL 需要 区 分 成 MySQL SQL、 


MS SQL、SQLLite SQL 等 才能 够 被 识别 出 来 。 但 是 目前 来 看 这 三 种 本 地 存储 的 规范 对 于 
Cordova 本 地 存储 功能 的 实现 都 有 着 极 大 的 借鉴 意义 。 





为 了 更 好 地 理解 HTML 5 的 本 地 存储 机 制 ， 范 例 13-1 中 提供 了 一 种 简单 地 利用 本 地 存储 
来 实现 访问 次 数 记录 的 方法 。 
【范例 13-1】 利 用 HTML 5 中 的 本 地 存储 功能 实现 访问 次 数 的 记录 。 
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将 页 面 保存 为 localStorage.html 并 运行 ， 用 鼠标 点 击 屏幕 左上 角 的 红色 方块 ， 即 可 弹出 
对 话 杠 显 示 该 页 面 被 访问 的 次 数 ， 以 及 之 前 访问 该 页 面 的 时 间 信 息 ， 如 图 13-1 所 示 。 


DD Hello world x D Hello world 








CGC © 127.0.0.1:8020/cordovaApp13/www/index.html 


欢迎 访问 


127.0.0.1:8020 显示 : 


你 访问 了 本 页 面 3 次 您 上 一 次 访问 的 时 间 是 Sat Dec 24 
2016 22:31:01 GMT+0800 (CST) 


禁止 此 页 再 显示 对 话 框 。 





图 13-1 之 前 对 该 页 面 的 访问 被 记录 了 下 来 


在 范例 中 使 用 了 HTML 5 中 的 localStorage() 方 法 ， 在 HTML 5 标准 中 提供 了 两 种 可 以 实 
现 本 地 存储 的 方法 localStorage 和 sessionStorage。 其 中 localStorage 的 存储 是 永久 性 的 ， 而 
sessionStorage 存储 的 内 容 则 会 在 浏览 器 关闭 后 被 全 部 清除 。 在 具体 用 法 上 它们 两 个 没有 太 大 
区 别 ， 只 需要 为 localStorage 或 者 sessionStorage 加 入 属性 即 可 ， 如 范例 第 23 行 所 示 。 

在 一 些 基 于 HTML 5 的 应 用 中 就 可 以 使 用 类 似 的 方法 在 本 地 存储 一 些 数 据 以 避免 重复 下 
载 ， 比 如 之 前 笔者 做 过 的 那 款 校 园 新 闻 应 用 ， 就 完全 可 以 采用 localStorage 方法 来 存储 学 生 通 
知 的 内 容 ， 而 不 需要 每 次 都 从 服务 器 上 重复 获取 。 此 外 ， 一 些 聊天 记录 ， 甚 至 是 利用 
Cordova 来 做 一 球 号 码 本 或 便签 都 可 以 用 类 似 的 方法 来 实现 存储 。 


1 3.2 Cordova 中 的 本 地 存储 功能 


上 一 节 介 绍 了 HTML 5 中 的 本 地 存储 功能 ， 那 么 在 Cordova 中 的 本 地 存储 又 是 什么 样 的 
呢 ? 与 上 一 节 介 绍 的 内 容 又 有 什么 联系 ? 这 些 都 是 本 节 要 解决 的 问题 。 

Cordova 的 本 地 存储 功能 被 设计 成 以 键 值 对 的 形式 来 永久 性 地 保存 数据 ， 比 如 以 下 代 
码 : 
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当 开发 者 想 要 使 用 被 存储 的 数据 时 ， 就 可 以 使 用 以 下 代码 来 调用 : 


而 这 种 方法 正 是 IndexedDB 标准 所 推崇 的 。 


| 有些 读者 可 能 不 理解 什么 是 键 值 对 ， 举 个 例子 吧 。 如 果 有 一 个 表格 ， 内 容 如 图 13-2 所 
示 ， 那 么 表格 中 每 一 项 的 列 名 与 它 唯一 对 应 的 内 容 就 组 成 了 一 对 键 值 对 。 比 如 周一 对 应 


13-2 ”周一 到 周 五 的 早饭 构成 的 键 值 对 





此 外 ，Cordova 的 存储 API 中 还 提供 了 一 个 简单 的 数据 库 ， 这 显然 是 受到 Web SQL 
Database 的 影响 。 虽 然 说 目前 没有 一 种 通用 的 SQL 语言 ， 但 是 由 于 在 移动 设备 中 普遍 预 装 的 
仅仅 是 一 个 SQLLite， 因 此 可 以 将 SQLLite SQL 的 语法 作为 在 Cordova 中 使 用 SQL 语言 的 标 
准 。 

在 实际 操作 中 可 以 采用 如 下 方法 来 新 建 一 个 数据 库 : 





之 后 束 可 以 像 操 作 SQL 一 样 对 数据 库 进 行 操作 ， 比 如 : 


当然 实际 使 用 时 比 现在 所 介绍 的 内 容 要 复杂 得 多 ， 不 过 这 并 不 影响 它 的 便利 性 ， 甚 至 可 
以 说 Cordova 中 的 本 地 存储 功能 是 它 最 常用 也 是 最 好 用 的 一 组 API。 








1 本 .本 数据 库 的 使 用 


在 前 面 已 经 介绍 过 ， 开 发 者 可 以 在 Cordova 中 以 SQLite SQL 的 语法 来 进行 数据 操作 ， 在 
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进行 这 些 操作 时 ， 就 必须 有 一 个 数据 库 来 提供 这 一 切 ， 这 就 是 本 节 将 要 介绍 的 Database 对 
和 

Database 对 象 为 开发 者 提供 了 对 数据 库 进 行 操作 的 可 能 ， 可 以 简单 地 理解 为 一 个 
Database 就 是 一 个 可 以 被 操作 的 数据 库 的 实体 。 它 包含 了 两 种 方法 transaction 和 
changeVersion， 其 中 transaction 很 常用 ， 一般 通过 它 来 执行 一 些 语句 ， 比 如 数据 库 的 创建 和 
数据 的 插入 ; changeVersion() 方 法 一 般 不 会 被 用 到 ， 它 用 来 实现 对 数据 库 版 本 号 的 查询 。 

但 是 要 怎样 才能 获得 一 个 Database 对 象 呢 ? 可 以 使 用 Storage 对 象 中 的 openDatabase() 方 
法 实现 。 具 体 方 法 在 上 一 节 中 已经 介绍 过 ， 如 下 所 示 : 





在 打开 了 数据 库 之 后 ， 自 然 要 对 它 进 行 一 些 操作 ，Database 对 象 使 用 方法 transaction() 来 
完成 这 些 操作 ， 具 体 方法 如 下 : 


该 方法 中 要 执行 的 操作 又 牵扯 到 了 一 个 新 的 对 象 ， 那 就 是 SQLTransaction 对 象 ， 它 包含 
了 人 允许 用 户 对 数据 库 进 行 操作 的 方法 executeSql()。 通 过 executeSql0 方 法 ， 用 户 可 以 在 设备 
上 直接 执行 一 条 或 者 多 条 SQL 语句 。 下 面 给 出 一 个 利用 这 个 方法 来 对 数据 库 进行 操作 的 例 
【范例 13-2 】 利 用 Cordova 的 API 操作 数据 库 。 
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编 详 之 后 运行 结果 如 图 13-3 所 示 。 
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index.html 
数据 库 操作 先 破 dundetinedError: a 
statement with no error nandler talled 
near "(": syntax error 


OK 





13-3 运行 之 后 的 结果 发 生 了 错误 
没有 想到 ， 运 行 之 后 的 范例 竞 然 发 生 了 错误 ， 按 道理 来 说 ， 书 中 的 例子 应 该 全 都 正确 才 
能 显示 出 作者 的 技术 精湛 么 ?为 此 ， 作 者 表示 ， 这 个 错误 是 为 了 引出 男 一 个 对 象 而 特意 留 下 
的 。 这 就 是 SQLError 对 象 ， 它 用 来 在 数据 库 操作 错误 时 记录 错误 的 原因 ， 关 于 它 所 包含 的 错 
误 类 型 如 表 13-1 所 示 。 
表 13-1 SQLError 对 象 中 记录 的 错误 类 型 
错误 类 型 说 明 


本 范例 出 现 的 错误 类 型 被 默认 作为 自 定 义 函 数 error 的 参数 传递 了 下 来 ， 如 范例 第 32 行 
所 示 。 那 么 这 到 底 是 一 种 什么 错误 呢 ? 

观察 范例 的 第 22 行 有 一 段 id unique 的 内 容 ， 也 就 是 说 ， 新 插入 的 内 容 中 id 的 值 必 须 是 
唯一 的 ， 而 在 范例 的 26 行 和 28 行 中 连续 两 次 插入 了 id 为 2 的 内 容 ， 因 此 造成 了 数据 插入 的 
错误 。 将 第 28 行 删除 后 ， 运 行 结果 如 图 13-4 所 示 。 
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iPhone 6s -iOS 10.2 (14C89) 


index.html 
数据 库 操 作成 功 


OK 





13-4 最 终 运行 成 功 的 结果 









虽然 说 SQLError 对 象 能 够 对 出 现 的 错误 进行 信息 提示 ， 但 是 一 些 本 身 操作 上 的 错误 确实 
无 法 识别 ， 就 好 像 汽 车 上 的 自动 导航 会 在 你 偏离 目标 路 线 时 给 予 提示 ， 但 当 你 设 定 了 错 
误 的 目标 后 自动 导航 是 无 法 察觉 的 。 因 此 也 就 有 了 图 13-3 提示 中 的 undefined 这 种 错误 
类 型 。 







介绍 了 这 人 么 多 内 容 ， 其 实 还 有 一 处 重要 的 遗漏 ， 那 就 是 SQL 语句 究竟 是 怎样 被 执行 的 
呢 ? 通过 范例 的 第 19~26 行 也 许 能 找到 一 些 答案 。 





可 以 看 到 SQL 语句 被 包含 在 一 个 名 为 executeSql0 的 方法 中 ， 这 正 是 执行 SQL 语句 时 所 
使 用 的 方法 ; 但 是 前 和 面 那个 tx 又 是 什么 呢 ? 

其 实 这 个 对 象 在 之 前 已 经 介绍 过 了 ， 那 就 是 SQLTransaction， 它 被 当 作 参数 传递 到 了 
populateDB 中 ， 如 范例 第 18 行 ， 这 样 就 可 以 利用 SQL 语句 来 实现 对 数据 库 的 操作 了 。 
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1 时 。4。 数据 库 内 容 的 读 取 


上 一 节 介 绍 了 Cordova 中 对 数据 库 进 行 操作 的 方法 ， 但 是 不 知道 读者 有 没有 一 个 疑问 。 
数据 库 主 要 实现 对 数据 的 增 、 删 、 改 、 查 等 操作 ， 如 果 增 和 删 的 功能 都 实现 了 ， 想 必 改 的 功 
能 也 是 不 难 的 ， 可 是 查询 到 的 数据 要 怎样 使 用 呢 ? 这 将 是 本 节 中 要 介绍 的 内 容 。 

既然 要 从 数据 库 中 查询 一 些 内 容 ， 就 肯定 要 有 相应 的 “容器 ”来 存放 它们 ， 这 个 “ 容 
器 ”就 是 SQLResultSet 对 象 。 范 例 13-3 展示 了 一 种 对 数据 库 中 内 容 进行 查询 的 方法 。 

【范例 13-3 】 利 用 SQLResultSet 对 象 实现 数据 库 的 查询 。 
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运行 之 后 的 结果 如 图 13-5 所 示 ， 可 以 看 到 在 范例 的 第 17~21 行 中 被 插入 的 数据 已 经 全 部 
被 读 取 并 显示 了 出 来 。 
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index.html 


行 数 为 1ID : 2 内 容 Second data 
行 数 为 21D : 999 内 容 so many data 


OK 





13-5 使 用 SQLResultSet 对 象 读 出 了 数据 库 中 的 内 容 


既然 看 到 了 结果 ， 接 下 来 就 要 看 看 这 到 底 是 怎么 实现 的 ? 在 范例 的 第 63 行 开始 执行 对 数 

据 库 的 操作 ， 而 在 它 的 回调 函数 success 中 却 比 范例 13-2 的 同名 函数 中 多 加 入 了 一 些 新 内 容 
( 见 第 55、56 行 处 ) 。 首 先 使 用 openDatabase0 打 开 了 名 为 Database 的 数据 库 ， 由 于 该 数据 

在 第 61 行 中 已 经 被 创建 (按照 执行 顺序 应 当先 执行 61 行 处 的 openDatabase() 方 法 ) ， 因 此 此 
处 openDatabase() 方 法 的 作用 是 打开 一 个 已 有 的 数据 库 ， 然 后 再 对 它 进 行 操作 (第 56 行 ) 。 

新 的 操作 在 自 定义 函数 querydb (第 24~27 行 ) 中 被 执行 ， 它 所 执行 的 只 有 一 条 SQL 语 
句 : 

SELECT * FROM MYDEMO 
即 查 询 表 MYDEMO 中 的 全 部 内 容 。 在 该 方法 中 仍然 声明 了 两 个 回调 函数 ， 当 SQL 语句 被 执 


行 成 功 时 ， 将 会 进入 函数 querySuccess 中 ， 同 时 也 会 将 一 个 类 行为 SQLResultSet 的 对 象 传 入 
其 中 ， 它 所 包含 的 属性 如 表 13-2 所 示 。 


表 13-2 SQLResultSet 类 中 的 属性 
属性 名 称 说 阴 


数据 库 中 记录 的 


SQL 语句 执行 后 所 作用 到 的 记录 的 条 数 
eo 这 是 一 个 SQLResultSetRowList 类 型 的 对 象 ， 包 含 了 读 操作 中 获取 的 记录 内 容 





范例 第 33 行 就 利用 了 SQLResultSet 对 象 中 rows 对 象 的 length 属性 来 返回 数据 库 中 记录 
的 条 数 。 既 然 已 经 提 到 了 rows， 那 么 就 有 必要 再 介绍 一 下 SQLResultSetRowList 类 ， 它 的 结 
构 比 较 人 简单 ， 除 了 已 经 使 用 过 的 length 之 外 ， 就 只 有 一 个 名 为 item 的 数组 对 象 ， 其 中 包含 了 
数据 库 中 每 条 记录 的 值 。 如 范例 第 39~43 行 就 是 对 它 的 使 用 。 


展示 虽然 本 地 数据 库 的 使 用 大 大 地 方便 了 开发 者 ， 但 是 由 于 SQLLite 本 身 的 局 限 性 导致 了 本 
地 存储 功能 不 够 强大 ， 比 如 无 法 支持 正则 表达 式 、 不 能 支持 多 表 查 询 等 。 和 希望 Cordova 
在 今后 的 版 本 中 能 够 加 强 这 方面 的 支持 。 
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1 司 .。5 键 值 对 的 使 用 方法 


数据 库 是 Cordova 本 地 存储 功能 中 最 方便 实用 的 一 种 API， 但 是 事 无 绝对 ， 在 某 些 特定 
情况 下 它 就 未 必 是 最 方便 的 了 ， 因 此 就 会 有 其 他 方法 与 它 形 成 互补 。 这 就 是 Cordova 中 的 另 
一 种 存储 方式 ， 它 的 使 用 方法 如 范例 13-4 所 示 。 

【范例 13-4】Cordova 本 地 存储 中 键 值 对 的 用 法 。 
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运行 之 后 的 结果 如 图 13-6 所 示 。 点 击 “ 写 入 数据 ”按钮 ， 将 会 向 key 对 应 的 键 值 对 中 写 
入 内 容 “ 本 地 存储 ”， 而 当 点 击 “删除 数据 ”按钮 时 则 会 将 本 地 存储 中 的 全 部 键 值 对 删除 。 


四 QQ 全 下 午 6:39 + 
四 了 了 了 TF J 人 Fe 





写 入 数据 


删除 效 气 


13-6 屏幕 上 部 的 显示 部 分 能 观察 key 对 应 键 值 对 的 内 容 
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在 本 例 中 ， 只 有 第 10、12、23 和 25 行 是 与 本 地 存储 有 关 的 内 容 ， 因 此 将 针对 这 几 处 进 
行 理解 。 第 10 行 和 第 12 行 的 作用 是 写 入 一 对 键 值 对 并 将 它 读 取出 来 。 在 写 入 键 值 对 的 时 候 
按照 如 下 格式 进行 : 


window.localstorage.setIten(" 刍 名", " 争 信 内容 Y; 
当 需 要 使 用 它 时 使 用 如 下 的 方法 进行 调用 (如 范例 第 12 行 和 第 25 行 ) : 


在 第 23 行 中 使 用 了 clear0 方 法 ， 将 全 部 键 值 对 清除 : 





通过 点 击 “ 删 除数 据 ” 按 钮 后 的 结果 可 以 看 出 ， 当 执行 了 该 方法 之 后 ，key 对 应 的 键 值 
变 成 了 null， 也 就 是 空 ， 说 明确 实 是 被 清除 了 。 

除了 clear 以 外 ， 其 实 还 有 一 种 用 来 删除 键 值 内 容 的 方法 ， 这 就 是 removeItem() 方 法 ， 用 
来 实现 对 指定 键 值 对 的 删除 操作 ， 使 用 方法 如 下 : 


最 后 一 定 还 会 有 读者 觉得 使 用 键 值 对 时 ， 需 要 记录 下 每 个 键 值 对 的 键 名 非 贡 不 方便 ， 所 
以 说 接 下 来 还 要 介绍 一 种 获取 本 地 存储 中 键 名 的 方法 : 





其 中 keyName 中 用 来 保存 获取 到 的 键 名 ， 而 最 后 那个 0 则 用 来 作为 案 引 ， 以 获取 要 使 用 
被 定义 的 第 几 组 键 值 对 的 键 名 。 


i 3.6 小 结 


本 章 从 HTML 5 的 本 地 存储 说 起 ， 介 绍 了 Cordova 中 本 地 存储 的 使 用 方法 ， 并 对 数据 库 
式 的 查询 和 键 值 对 的 查询 分 别 做 了 介绍 。 由 于 使 用 方法 的 不 同 导致 了 这 两 种 方法 有 着 不 同 的 
特点 。 比 如 要 保存 一 系列 的 文章 或 电话 号 码 ， 那 肯定 是 数据 库 方式 比较 方便 ， 但 如 果 只 是 要 
保存 一 组 数据 ， 那 么 自然 要 首选 键 值 对 的 方式 。 除 此 之 外 ， 还 可 以 使 用 HTML 5 本 身 的 存储 
方式 。 本 章 虽 然 内 容 不 多 却 需要 读者 不 断 地 思考 ， 在 实际 应 用 中 选择 最 适合 、 最 简便 的 方式 
来 处 理 数 据 。 





第 14 章 
打 庆 一 秋 夫 FlapPy Bird 的 咱 N 了 XXX 


利用 HTML 5 容易 学 习 和 使 用 的 特点 ， 可 以 使 开发 者 方便 地 完成 一 些小 游戏 ， 而 Cordova 
则 为 这 些小 游戏 最 终 的 本 地 化 提供 了 可 能 。 相 信和 在 读者 的 心里 ， 利 用 HTML 5 来 实现 一 款 游 
戏 还 是 有 很 大 难度 的 ， 因 此 本 章 先 不 调用 具体 的 API， 而 是 单纯 使 用 HTML 和 JavaScript 来 实 
现 一 款 简 单 的 赛车 游戏 ， 使 读者 能 够 再 一 次 体会 到 Cordova 所 带 来 的 便利 。 本 章 将 模仿 年 初 
非常 流行 的 游戏 Flappy Bird 来 对 这 一 过 程 进行 详细 的 描述 。 本 章 虽 然 不 会 提 到 对 Cordova 任 
何 一 处 的 具体 调用 ， 但 是 不 得 不 说 的 是 ， 利 用 原生 的 HTML 5 来 开发 应 用 ， 再 借助 Cordova 
来 打包 的 方式 ， 本 身 就 是 对 Cordova 用 法 最 本 质 的 提炼 。 


本 章 主 要 知识 点 : 


如 何 借鉴 已 有 案例 来 实现 自己 的 作品 。 

碰撞 检测 的 原理 和 具体 实现 方法 。 

怎样 将 复杂 的 系统 简化 为 简单 、 容 易 实 现 且 能 够 被 用 户 接受 的 系统 模型 。 
怎样 将 复杂 的 元 素 简化 ， 使 之 能 够 与 自己 的 开发 水 平 相 适 应 。 


刚刚 完成 了 Cordova 基础 知识 学 习 的 读者 ， 有 没有 想 做 一 点 东西 的 冲动 ?在 了 解 了 
Cordova 是 什么 之 后 ， 有 没有 联想 到 可 以 不 使 用 Cordova 的 API， 而 仅仅 利用 它 的 打包 功能 来 
实现 一 球 游 戏 ? 

想 想 小 学 刚 开始 写作 文 时 的 场景 ， 几 乎 所 有 的 小 朋友 都 会 仿照 有 限 的 几 个 模板 进行 模 
仿 ， 于 是 就 出 现 了 “我 和 我 的 小 伙伴 们 都 惊 采 了 ! ”“ 我 高 兴 得 一 中 三 尺 高 ! ”“ 我 胸 前 的 
红领巾 更 鲜艳 了 ! ”这 样 流传 已 久 的 句子 。 

其 实 做 一 球 游 戏 也 是 这 样 ， 最 初 可 以 从 模仿 开始 ， 然 后 再 做 出 一 些小 小 的 改动 束 算 是 日 
己 的 创作 了 。 而 当 改 动 到 了 一 定 的 程度 就 可 以 算是 创新 了 。 

几 天 前 ， 笔 者 偶然 发 现 喘 边 的 人 在 办 暇 时 都 在 玩 看 同一 蒜 游 戏 ， 如 图 14-1 所 示 。 在 游戏 
中 有 一 只 被 像素 化 了 的 “ 鸟 ” 的 图 案 ， 用 户 每 点 击 一 下 屏幕 它 就 会 同上 路 起， 以 此 来 肛 避 在 
它 前 进 方 同上 的 水 管 。 如 果 不 笠 跃 起 高 度 太 高 或 者 太 低 ，“ 像 素 乌 ”就 会 宣告 死亡 ， 游 戏 结 
束 。 
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14-1 热门 游戏 Flappy Bird 
当时 笔者 看 到 这 球 游 戏 的 第 一 反应 就 是 小 时 候 玩 过 无 数 次 的 任天堂 游戏 “超级 玛丽 ”的 
水 下 模式 (如 图 14-2 所 示 ) 。 在 游戏 中 “马里 奥 ” 可 以 通过 “跳跃 ”来 实现 同上 的 动作 ， 而 
当 玩 家 不 给 它 命 令 时 ，“ 马 里 奥 ” 则 会 下 了 哈 。 玩 家 可 以 通过 “左右 ”和 “跳跃 ”来 操纵 马里 
奥 躲 避 水 下 的 螃蟹 马 怨 等 怪物 ， 如 图 14-2 所 示 。 


es | 





i 


14-2 “超级 玛丽 ”水 下 版 


这 样 分 析 起 来 就 会 发 现 虽然 Flappy Bird 是 一 球 新 游戏 ， 而 “超级 玛丽 ”是 20 年 前 的 老 
游戏 ， 但 是 实际 上 Flappy Bird 在 制作 难度 上 要 比 “ 超 级 玛丽 ”小 了 不 少 。 首 先 “ 像 素 鸟 ”所 
需要 躲避 的 钢管 永远 只 疝 一 个 方向 运动 而 且 不 存在 类 似 海 狗 、 海 藻 这 样 复杂 的 地 形 以 及 “人 金 
币 ” 等 元 素 ， 其 次 是 Flappy Bird 需要 反应 的 仅 有 “跳跃 ”这 个 一 维 的 动作 ， 而 不 像 “ 超 级 玛 
丽 ” 那 样 还 需要 考虑 多 个 方向 。 

这 样 看 来 ， 其 实 开发 一 秋游 戏 并 不 是 什么 难事 ， 尤 其 是 在 本 章 中 ， 为 了 能 让 读者 更 直观 
地 体验 到 这 种 化 简 的 方法 ， 笔 者 决定 干脆 把 积分 的 功能 也 给 省 略 掉 ， 仅 仅 留 下 一 个 “像素 
鸟 ” 不 断 跳跃 的 主体 内 容 。 

这 样 一 来 ， 本 游戏 需要 实现 的 功能 如 下 : 


216 


第 14 章 ”打造 一 款 类 Flappy Bird 的 小 游戏 





(1) “像素 鸟 ” 不 断 问 屏幕 的 一 侧 飞 行 ， 当 用 户 点 击 屏 磋 上 的 茶 个 按钮 时 ， 它 就 会 弹 
起 ， 而 当 用 户 没 有 进行 操作 时 它 则 会 目 由 下 落 。 

(2) 在 “像素 乌 ” 飞 行 的 过 程 中 ， 会 不 断 遇 到 各 种 长 度 的 “钢管 ”， 而 为 了 将 这 一 过 程 
进一步 向 化， 在 本 案例 中 仅 保 留 了 屏 攻 下方 的 钢管 。 

(3) 当 用 户 操纵 的 “像素 马 ” 与 “钢管 ”发 生 碰撞 时 ，“ 像 素 乌 ”死亡 ， 族 戏 结束 。 

由 此 ， 可 以 得 到 一 个 游戏 运行 时 的 大 概 示意 ， 如 图 14-3 所 示 。 其 中 ， 红 色 的 方块 代表 
“ 像 系 鸟 ”， 后 面 为 更 色 的 天 空 背景 绿色 的 长 方形 部 分 为 原作 中 的 “钢管 ”， 而 在 本 案例 
中 笔者 将 把 它 奉 换 成 “ 树 ” 的 样子 。 





14-3 “山寨 版 ”Flappy Bird 可 能 采用 的 布局 


但 是 这 个 样子 可 能 还 会 有 读者 认为 太 复杂 了 ， 那 么 干脆 就 对 它 进一步 和信 化 ， 使 得 屏 磋 中 
同时 仪 能 显示 一 棵 “ 树 (长方形) ”。 这 样 一 来 ， 实 际 上 再 要 处 理 的 仅 有 “ 像 系 乌 ” 和 
“ 树 ” 两 个 对 象 了 。 

这 样 就 得 到 了 最 终 的 需求 ， 在 屏 大 上 显示 一 个 “像素 乌 ” 和 一 株 “ 树 ”。“ 像 系 马 ”在 
飞行 的 过 程 中 可 能 会 碰 到 迎面 而 来 的 大 树 ， 因 此 和 表 要 用 户 操纵 它 进 行 跳跃 来 对 “ 树 ”进行 办 
避 。 

在 下 一 节 中 ， 笔 者 还 将 对 这 个 模型 进一步 简化 ， 使 之 确实 成 为 一 秋 容 易 实现 且 具 有 一 定 
可 玩 性 的 共 智 族 戏 。 





1 4 ,2 模型 建立 


如 果 读 者 玩 过 “ 魂 斗 罗 ” 一 类 的 游戏 ， 就 会 党 得 实际 上 这 类 模版 游戏 在 人 物 行走 时 还 会 
遇 到 一 个 难点 ， 那 就 是 人 物 行 动 和 地 图 行动 的 判断 。 

因为 在 横 版 游戏 中 ， 通 币 都 是 通过 对 背景 的 移动 而 不 是 人 物 的 移动 来 实现 人 物 移 动 的 效 
果 的 ， 比 如 在 如 图 14-4 的 人 物 画 面 中 ， 当 人 物 位 于 屏幕 一 侧 时 ， 通 过 人 物 移动 而 背景 静止 的 
方式 来 显示 人 物 的 运动 。 而 当 人 物 运动 到 屏 磊 中 间 位 置 时 ， 人 物 的 移动 则 是 通过 背景 向 左 平 


211 





Apache Cordova 移动 应 用 开发 实战 


移 来 表现 出 人 物 同 右 运动 的 假象 。 


HI: 30000 
29 


人 物 在 地 图 一 侧 时 ， 地 图 
A EN 


Ee ; 有 wi wi , | ; 
要 各 
了 加 "” 


地 


汪汪 re 
‘a 和 5 





图 14-4 魂 斗 罗 中 的 人 物 移动 


而 在 本 范例 中 ， 为 了 简化 这 一 过 程 ， 决 定 将 “像素 鸟 ”“ 固 定 ”在 屏幕 的 中 央 位 置 ， 仅 
通过 “ 树 ” 向 左 的 运动 来 表现 “像素 鸟 ”向 右 飞翔 这 一 行为 。 因 此 在 本 范例 中 “像素 鸟 ” 实 
际 上 仅仅 需要 进行 上 、 下 动作 的 判断 就 可 以 了 。 

此 外 ， 本 范例 中 虽然 省 略 了 游戏 的 积分 部 分 ， 但 是 由 于 考虑 到 在 本 项 目 会 用 到 一 个 作用 
于 全 局 的 计时 器 ， 因 此 可 以 简单 地 将 游戏 进行 的 时 间作 为 分 数 显示 在 屏幕 上 。 

由 此 ， 可 以 得 出 本 游戏 最 终 实现 时 的 模型 ， 如 图 14-5 所 示 。 











树 自动 向 左边 移 
动 ， 显 示 出 “像素 
鸟 ” 向 右 飞 行 的 效果 


图 14-5 最 终 建立 的 模型 
完成 界面 设计 之 后 ， 将 会 针对 这 一 模型 设计 相应 的 逻辑 ， 以 便 最 终 能 够 实现 这 一 模型 。 
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1 经 .界面 设计 


当 模 型 设计 完成 之 后 ， 不 应 该 急于 去 实现 它 的 逻辑 功能 ， 而 是 要 将 游戏 中 各 个 要 素 先 以 
一 定 的 规律 显示 在 屏幕 上 ， 这 样 不 但 有 利于 下 一 步 逻辑 设计 的 思路 清晰 ， 对 于 今后 的 测试 和 
模型 的 进一步 简化 都 有 者 非常 大 的 帮助 。 

笔者 实现 了 一 个 简单 的 界面 ， 如 范例 14-1 所 示 。 

【范例 14-1】 利 用 HTML 和 CSS 实现 游戏 界面 的 布局 。 
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运行 之 后 的 界面 如 图 14-6 所 示 。 
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图 14-6 实现 后 的 游戏 界面 


一 般 在 使 用 HTML 制作 游戏 时 ， 主 要 采用 绝对 定位 的 方法 来 决定 各 个 元 素 所 处 的 位 置 。 





有 细心 的 读者 可 能 注意 到 了 ， 虽 然 各 个 元 素 都 使 用 了 绝对 定位 的 方式 来 进行 定位 ， 但 是 
它们 的 定位 方式 却 是 不 尽 相 同 的 ， 比 如 “ 像 闲 乌 ” 的 定位 《范例 第 71 行 和 第 72 行 ) 采用 了 
left 和 bottom 两 个 属性 ， 而 树木 的 定位 (范例 第 81 行 和 第 82 行 ) 则 采用 了 bottom 和 right 
两 个 属性 。 这 又 是 为 什么 呢 ， 把 它们 统一 起 来 按照 一 般 人 的 习惯 全 部 使 用 left 和 top 来 进行 
定位 难道 不 好 吗 ? 

统一 起 来 日 然 是 一 种 不 错 的 方案 ， 尤 其 是 在 使 用 现成 的 物理 引擎 时 ， 能 够 有 效 地 对 游戏 
中 的 单位 进行 管理 。 但 是 本 项 目 只 是 一 个 被 简化 了 的 例子 ， 为 了 能 够 让 读者 更 好 地 理解 代 
码 ， 扎 的 每 一 个 函数 都 是 重新 编写 的 。 仅 有 的 两 个 物体 〈 像 素 乌 和 树木 ) 在 进行 碰撞 检测 
时 ， 使 用 的 仅仅 是 像素 鸟 的 奔 部 坐标 和 树木 的 项 部 坐标 进行 比较 ， 因 此 使 用 bottom 会 比较 方 
便 。 

在 之 前 的 设计 中 ,希望 屏 旬 上 同时 只 存在 一 柠 “ 树 ”， 因 此 ， 使 用 right 属性 对 树木 进行 
判断 ， 能 够 更 加 方便 地 确定 “ 树 ” 元 素 是 否 还 保留 在 屏蔽 中 。 

至 此 ， 对 界面 的 设计 和 实现 就 可 以 先 告 一 段落 了 ， 下 一 节 将 看 手 实 现 14.2 节 所 建立 的 模 
型 。 

在 本 范例 的 第 6~18 行 ， 笔 者 已 经 为 今后 的 逻辑 实现 部 分 分 别 预 留 了 用 来 插入 变量 、 流 
程 判 断 ， 以 及 日 定义 函数 的 位 置 ， 在 下 一 节 中 将 回 其 中 插入 代码 。 
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1 4 .A 游戏 的 设计 和 实现 


在 前 和 而 的 内 容 中 ， 己 经 分 析 了 这 于 小 游戏 所 要 实现 的 功能 ， 并 实现 了 游戏 界面 布局 ， 本 
节 将 分 成 多 个 模块 来 实现 游戏 的 各 个 功能 。 


14.4.1 “像素 乌 ” 的 飞行 

说 是 “像素 鸟 ”的 飞行 ， 其 实 倒 不 如 说 是 实现 树木 的 移动 更 为 贴切 一 些 。 本 节 将 设置 一 
个 计时 器 来 实现 树木 向 左 不 断 移动 的 效果 。 具 体 实现 方法 如 范例 14-2 所 示 。 

【范例 14-2】 实 现 树 木 的 移动 。 
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运行 之 后 可 以 看 到 “ 树 ” 会 在 屏幕 中 循环 移动 ， 并 且 每 次 能 够 刷新 出 不 同 的 高 度 ， 如 图 
14-7 所 示 。 
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14-7 实现 了 “ 树 ” 动 功能 


下 面 来 介绍 具体 代码 。 首 先 震 要 明确 的 是 ， 在 利用 HTML 制作 游戏 时 ， 几 平 没 有 不 使 用 
国 数 setInterval0 的 ， 因 此 在 实现 具体 功能 之 前 ， 首 先 就 要 习惯 性 地 在 程序 中 加 入 一 段 使 用 
setIntervalO0 函 数 进行 计时 的 代码 ， 如 范例 第 14 行 所 示 。 


当然 ， 一 些 棋 牌 类 游戏 (比如 扫雷 或 者 围棋 等 ) 可 能 是 不 需要 计数 器 的 ， 但 是 这 类 游戏 





不 在 我 们 讨论 的 范围 之 内 。 


接 下 来 就 要 开始 思考 ，“ 树 ”移动 这 一 功能 的 本 质 是 什么 ? 坚 无 疑问 ， 目 然 是 树 的 横 坐 
标 改 变 了 ， 在 本 范例 中 就 体现 为 该 元 素 right 属性 的 变化 。 因 此 就 可 以 先 在 被 计数 器 调用 的 
tree_move 国 数 中 加 入 一 个 新 的 目 定 义 图 数 set_tree。 

那么 就 先 实现 set_ tree 图 数 的 功能 好 了 ， 即 设置 “ 树 ” 元 素 的 位 置 ， 为 了 方便 ， 可 以 先 
设置 一 个 全 局 变量 tree_right， 如 第 9 行 所 示 。 可 是 也 不 能 光 位 置 移动 ， 如 果 是 同一 棵 树 反 复 
出 现 游戏 玩 关 会 很 无 聊 ， 于 是 就 义 加 入 了 一 个 变量 tree height 用 于 记录 树木 的 高 度 。 接 下 来 
就 是 用 第 37~44 行将 这 些 属性 反映 到 屏幕 上 来 。 

既然 能 够 让 树 显 示 了 ， 那 还 得 让 它 变化 。 没 错 ， 当 初 设置 计数 右 就 是 这 个 目的 ， 因 此 可 
以 设置 每 次 让 “ 树 ” 元 素 的 right 属性 加 1， 从 而 起 到 位 置 变化 的 作用 。 同 时 还 要 判断 “ 树 ” 
是 否 超出 了 屏幕 的 范围 ， 如 范例 第 26~35 行 所 示 。 

这 样 一 来 ， 整 个 “ 树 ” 的 移动 功能 就 算是 实现 了 ， 根 据 物体 相对 运动 的 法 则 ， 就 可 以 理 
解 为 是 “像素 乌 ” 在 同 前 飞行 了 。 


14.4.2 “像素 乌 ” 的 跳跃 和 下 洛 
以 上 介绍 了 使 “ 树 ” 移 动 的 方法 ， 本 小 节 将 继续 介绍 与 移动 有 关 的 内 容 ， 只 不 过 被 移动 
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的 对 象 变 成 了 这 天 游戏 的 主角 “像素 马 ”。 
【范例 14-3 】 实 现 “ 像 素 马 ”的 跳跃 和 下 落 。 
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运行 之 后 的 效果 如 图 14-8 所 示 。 点 击 屏幕 确 部 的 “跳跃 ”按钮 可 以 看 到 “像素 马 ” 狐 地 
辣 上 一 冲 ， 之 后 又 缓 缓 地 下 降 。 本 范例 特意 加 入 了 一 个 边界 检测 的 功能 ， 也 就 是 说 “像素 
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马 ” 绝 对 不 会 飞 到 屏幕 中 过 高 的 地 方 。 





14-8 “像素 乌 ” 跳 跃 到 了 高 空中 


想 一 想 为 什么 笔者 没有 考虑 “像素 鸟 ， 下 落 过 低落 到 屏幕 底部 的 情况 呢 ? 答案 将 会 在 下 





面 给 出 。 


其 实 读者 自己 阅读 代码 就 会 发 现 ， 控 制 “ 像 素 乌 ”的 方法 与 控制 “ 树 ” 移 动 的 方法 大 致 
相同 ， 都 是 通过 设置 一 个 公共 变量 的 数值 来 实现 对 元 素 位 置 的 改变 。 只 不 过 在 “像素 乌 ” 的 
移动 操作 中 还 要 考虑 用 户 按 键 使 它 跳 跃 的 情况 。 

阅读 代码 的 第 42 行 ， 可 以 看 到 有 一 个 让 元 素 的 高 度 加 10 的 操作 ， 就 是 它 让 “像素 乌 ” 
一 下 跃 起 的 。 为 了 使 “跳跃 ”成 为 一 个 连续 的 动作 而 不 至 于 太 突 元， 这 个 值 不 能 设 得 太 大 ， 
但 是 可 以 连续 进行 几 次 同样 的 操作 来 增加 “跳跃 ”的 高 度 。 所 以 在 第 12 行 设置 了 变量 
jump_height 来 专门 存放 这 个 操作 的 次 数 。 

除 此 之 外 ， 在 进行 这 些 操作 之 前 还 要 进行 两 个 判断 ， 一 个 是 判断 “像素 乌 ” 有 没有 飞 出 
屏幕 的 范围 〈 范 例 35~38 行 ) ， 另 一 处 就 是 判断 当前 飞行 的 状态 是 跳跃 还 是 下 落 〈 范 例 第 40 
me 

还 有 一 处 非常 重要 的 改动 在 泡 例 的 第 27 行 ， 新 加 入 了 一 个 目 定义 函数 move。 因 为 现在 
同时 有 两 个 元 素 需 要 移动 ， 甚 至 在 以 后 的 内 容 中 还 要 加 入 碰撞 检测 的 功能 。 因 此 就 需要 一 个 
统一 的 地 方 来 定理 它们 。 这 样 一 来 就 使 用 了 函数 move 将 原本 的 tree_move 和 在 本 范例 中 新 定 
义 的 bird_move 全 部 包括 在 其 中 了 。 


阳 元 实际 上 ， 在 进行 实际 项 目 开 发 时 要 尽量 避免 这 种 滥用 公共 变量 的 情况 发 生 。 但 是 由 于 这 
只 是 一 个 非常 小 的 项 目 而 且 本 项 目的 目的 主要 是 为 了 使 读者 理解 一 款 游戏 的 开发 过 程 ， 
还 请 各 位 读者 忽略 这 个 错误 吧 。 
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14.4.3 ”碰撞 检测 功能 

通过 以 上 的 学 习 ， 已 经 能 够 轻松 地 实现 对 “像素 鸟 ” 的 操作 了 ， 但 是 现在 这 款 游戏 看 起 
来 反而 非常 奇怪 了 。 因 为 原本 这 款 游戏 是 让 玩家 去 躲避 “ 树 ” 的 ， 但 是 现在 玩家 操纵 的 “ 像 
素 乌 ” 却 可 以 毫 无 危险 地 “ 撞 ” 到 树 上 。 这 有 点 像 十 几 年 前 一 些 非 常山 寨 的 游戏 机 上 的 象棋 
游戏 ， 虽 然 可 以 模拟 出 棋盘 让 玩家 相互 对 弈 ， 却 没有 任何 限定 的 规则 。 

而 本 小 节 中 的 内 容 就 是 要 为 这 款 游戏 加 入 规则 ， 对 于 这 款 游戏 来 说 规则 只 有 一 个 ， 那 就 
是 不 要 撞 树 。 

【范例 14-4】 为 游戏 加 入 碰撞 检测 。 
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运行 之 后 故意 使 “像素 鸟 ” 撞 树 ， 可 以 看 到 游戏 弹出 对 话 框 提示 : 游戏 失败 ， 并 结束 ， 
如 图 14-9 所 示 。 
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index.html 
游戏 失败 


OK 





图 14-9 游戏 碰撞 检测 的 结果 
按照 最 初 的 设 定 ， 无 论 是 “像素 鸟 ” 撞 到 树 上 还 是 落 到 地 上 都 算是 游戏 失败 ， 游 戏 自 动 
结束 ， 见 范例 第 33 行 和 第 38 行 的 判断 。 
那么 判断 的 数据 又 是 怎么 来 的 呢 ? 笔者 将 利用 图 14-10 所 示 来 进行 介绍 。 首 先 要 明确 几 
个 尺寸 的 数值， 即 本 范例 中 所 使 用 的 页 面 宽 度 是 400px，“ 像 亲 马 ”的 形状 是 一 个 长 宽 均 为 
50px 的 正方 形 。“ 树 ”的 宽度 为 100px。 那 么 在 图 14-10 中 给 出 两 种 临界 位 置 ， 通 过 它 的 计 
算 就 可 以 得 出 ， 边 界 检 测 的 上 界 和 下 界 分 别 是 75 和 225 了 。 


第 一 种 临界 位 置 , 碰 
撞 点 在 “ 树 ” 的 左边 
界 


第 二 种 临界 位 置 ， 碰 撞 
点 在 “ 树 ” 的 右边 界 





图 14-10 碰撞 检测 的 两 种 边界 条 件 
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此 外 ， 本 范例 还 加 入 了 对 游戏 分 数 的 显示 ， 其 实 就 是 设 了 一 个 整数 变量 num， 当 计数 需 
每 使 用 一 次 就 会 加 1， 这样 就 可 以 将 这 个 得 到 的 数字 直接 作为 分 数 显 示 出 来 了 。 








1 4 界面 的 美化 


以 上 已 经 实现 了 这 款 山 寨 Flappy Bird 游戏 的 部 分 功能 了 ， 那 么 接 下 来 要 做 的 就 是 对 当前 
丑陋 的 界面 进行 美化 。 首 先 要 做 的 还 是 将 那个 方块 换 成 一 个 可 爱 的 “像素 鸟 ”图 案 。 

经 过 权衡 ， 笔 者 决定 使 用 游戏 “超级 玛丽 ”中 的 蘑菇 头 来 作为 “像素 乌 ” 的 蔡 代 者 ， 如 
14-11 所 示 。 将 它 保存 为 bird.png 尺寸 为 50x50px， 然 后 就 可 以 对 页 面 中 的 CSS 样式 进行 
修改 了 。 除 了 “像素 鸟 ”图 案 之 外 ， 还 要 对 天 空 背 景 加 一 个 渐变 的 效果 ， 而 树 则 保持 绿色 
不 变 。 





忆 


14-11 最 终 被 选中 用 来 代替 “像素 鸟 ”的 图 案 
具体 的 修改 方案 如 下 : 
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修改 后 的 界面 如 图 14-12 所 示 。 虽 然 还 是 有 些 不 伦 不 类 ， 但 是 要 比 修改 之 前 好 很 多 了 。 
有 兴趣 的 读者 可 以 再 试 者 为 “ 树 ”、 按 钮 等 加 入 新 的 背景 等 元 素 ， 使 它 的 界面 变 得 真正 好 看 
起 来 。 





14-12 ”修改 后 的 界面 


完成 之 后 就 可 以 利用 Cordova 对 它 进 行 打包 了 ， 不 过 由 于 Cordova 执行 效率 的 问题 ， 如 
果 将 范例 中 计数 占 的 频率 设置 得 过 快 ， 可 能 会 导致 游戏 无 法 正常 啊 应 用 户 的 点 击 操作 ;但 是 
如 果 频 率 过 低 又 会 造成 游戏 进行 缓慢 ， 影 响 游戏 的 可 玩 性 ， 这 是 一 个 非常 大 的 遗憾 。 


1 4 人 〇 ”缺陷 和 不 足 


经 过 了 以 上 的 修改 ， 这 球 游 戏 终于 能 够 出 来 见 人 了 。 但 是 它 仍 然 存在 看 许多 不 足 ， 而 本 
节 的 内 容 就 是 要 对 这 些 不 足 之 处 进行 分 析 。 


14.6.1 玩法 上 的 缺陷 
在 最 初 见 到 Flappy Bird 这 款 游 戏 时 ， 笔 者 还 有 些 奇怪 为 什么 要 将 钢管 设置 为 上 下 两 截 
呢 ? 如 图 14-13 所 示 。 难 道 就 像 笔 者 在 范例 中 设计 的 这 样 只 有 一 截 不 好 吗 ? 
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14-13 ”Flappy Bird 中 的 障碍 设计 


后 来 笔者 就 发 现 了 一 个 有 趣 的 问题 。 在 本 章 所 实现 的 这 球 游 戏 中 ， 如 果 用 户 不 停 地 点 击 
底部 的 “跳跃 ”按钮 ， 那 么 就 永远 不 会 出 现 “ 游 戏 失败 ”的 结果 ， 游 戏 会 一 直 进 行 下 去 。 而 
Flappy Bird 中 障碍 物 的 这 一 设计 就 有 效 地 避免 了 这 一 bug。 

那么 ， 这 个 bug 要 怎么 修改 呢 ? 笔者 提供 了 两 种 方案 可 供 选 择 : 


(1) 像 Flappy Bird 中 一 样 ， 把 “ 树 ” 也 设计 成 上 下 两 截 的 。 相 信 经 过 了 本 章 的 学 习 之 
后 这 不 会 构成 什么 困难 。 

(2) 修改 游戏 的 设 定 ， 当 “像素 乌 ”《〈 现 在 应 该 叫 蔗 站 头 了 ) 碰 到 屏 旬 顶 部 时 同样 显示 
游戏 失败 。 


这 两 种 方案 修改 起 来 都 非 党 简单， 不 会 给 开发 者 市 来 太 大 的 负担 ， 因 此 读者 有 兴趣 的 话 
可 以 目 行 尝试 一 下 。 


14.6.2 ”功能 上 的 贫乏 

此 功能 依然 要 留 给 读者 去 完成 ， 比 如 可 以 使 用 本 地 存储 中 键 值 对 的 方法 来 记录 用 户 的 最 
高 分 记录 ， 或 者 是 使 用 设备 的 展 动 效果 来 对 用 户 的 操作 进行 一 些 反馈 等 。 

由 于 进行 这 些 修改 需要 展示 出 太 多 无 用 的 代码 ， 以 至 于 浪费 许多 篇 幅 ， 因 此 这 些 工作 也 
只 有 徘 读者 去 完成 了 。 


14.6.3 ”人 机 交互 不 友好 

应 当 再 设计 一 个 进入 游戏 的 欢迎 界面 ， 甚 至 可 以 设计 一 个 简单 的 说 明 来 增强 这 款 游戏 容 
易 上 手 的 程度 。 此 外 还 可 以 以 小 故事 或 者 小 漫画 的 形式 为 游戏 加 入 一 个 简单 的 背景 介绍 。 游 
戏 “ 愤 把 的 小 鸟 ” 就 是 这 方面 一 个 非常 不 错 的 例子 〈 见 图 14-14 所 示 ) 。 


234 


第 14 章 ”打造 一 款 类 Flappy Bird 的 小 游戏 





14-14 “愤怒 的 小 鸟 ” 游 戏 中 介绍 背景 的 漫画 


除 此 之 外 还 应 为 游戏 加 入 一 些 背 景 音乐 等 娱乐 元 素来 增强 用 户 的 代入 感 ， 而 这 些 功 能 都 
可 以 用 前 几 章 介绍 过 的 Cordova API 简单 实现 。 


4./ 小 结 


本 章 实 现 了 一 个 远 和 远 不 够 完善 的 小 游戏 ， 虽 然 它 很 简单 而 且 有 许多 bug， 但 是 通过 实现 
它 的 流程 来 学 会 设计 游戏 、 实 现 游 戏 、 完 善 一 球 游 戏 的 思想 是 最 午 要 的 。 此 外 ， 在 学 完了 本 
间 的 内 容 之 后 ， 也 要 去 思考 有 什么 功能 可 以 再 加 入 到 这 球 游 戏 中 ? 而 这 些 功能 是 使 用 了 原生 
的 JavaScript 还 是 Cordova 提供 的 API? 这 样 做 有 什么 好 处 ? 笔者 期 待 看 有 一 天 本 书 的 读者 也 
能 做 出 像 Flappy Bird 这 样 的 神 作 出 来 。 
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在 14 章 的 内 容 中 ,， 利 用 JavaScript 实现 了 一 个 简单 的 HTML 5 游戏 ， 但 是 就 目前 来 看 ， 
处 理 器 的 运算 速度 还 无 法 支撑 起 足够 的 运算 量 以 保证 游戏 的 流畅 运行 。 对 于 开发 者 来 说 ， 他 
们 使 用 Cordova 更 希望 能 够 实现 一 些 信息 管理 类 的 应 用 ， 比 如 新 闻 浏 览 、 在 线 商城 等 。 这 一 
类 应 用 不 但 对 资源 的 消耗 较 小 ， 即 使 Cordova 的 运行 效率 总 也 不 见长 进 ， 仍 然 能 够 担负 起 运 
行程 序 的 重任 。 除 此 之 外 ， 这 类 应 用 还 都 比较 容易 上 手 ， 只 要 有 一 个 简单 的 模板 ， 开 发 者 就 
能 够 轻松 对 这 类 应 用 进行 大 量 复 制 ， 而 这 对 目前 “以 量 取胜 ”的 Cordova 开发 者 们 来 说 尤其 
重要 。 

由 于 本 章 所 要 实战 的 项 目 是 一 个 “巨大 ”的 整体 ， 因 此 就 不 得 不 涉及 一 些 对 服务 端的 操 
作 ， 比 如 PHP 后 全 的 编写 等 ， 甚 至 要 接触 到 一 点 “黑客 ”的 内 容 。 





本 草 的 主要 内 容 有 : 


@ JSON 数据 的 格式 以 及 如 何 获取 和 使 用 JSON 数据 。 
@ 使 用 Ajax 获取 其 他 页 面 上 的 内 容 。 
@ 如 何 实现 “ 跨 域 ” 读 取 其 他 页 面 上 的 内 容 。 


项 目 开 始 前 的 “| 内 言 碎 语 ” 

对 于 这 本 书 的 读者 来 说 ， 现 在 面临 看 一 个 重要 的 “问题 ”， 那 束 是 和 学习】 了 Cordova 之 后 
到 底 能 做 什么 。 虽 然 本 书 的 前 几 章 对 Cordova 的 某 些 特 点 (比如 跨 平 台 性 、 高 效 性 等 ) 进行 
了 肯定 性 地 介绍 ， 但 作为 新 世纪 的 程序 员 和 创业 者 应 该 有 辨别 是 非 的 能 力 。 有 没有 考虑 过 现 
在 的 主流 应 用 中 为 什么 还 没有 见 到 过 使 用 Cordova 开发 的 程序 。 

事实 上 这 样 的 应 用 是 有 的 ， 只 不 过 读者 没有 使 用 过 或 者 使 用 过 却 没 有 意识 到 这 是 使 用 
Cordova 开发 的 。 在 这 些 应 用 中 最 有 名 的 一 球 就 是 “ 豆 因 音乐 人 (如 图 15-1 所 示 ) ”。 笔 者 
曾经 使 用 过 这 款 软 件 ， 得 出 的 结果 就 是 这 实在 不 像 是 Cordova 做 出 来 的 东西 ， 一 个 重要 的 标 
志 就 是 相对 于 笔者 开发 的 某 款 音乐 播放 器 来 襄 ， 它 流畅 得 实在 是 有 些 不 像 话 。 

后 来 笔者 在 网 上 找到 了 这 于 软件 开发 者 的 一 篇 日 志 ， 它 揭示 了 他 们 是 怎样 使 用 Cordova 
达到 近似 原生 应 用 效果 的 ， 而 他 们 用 来 实现 音乐 播放 功能 的 部 分 ， 目 然 引 起 了 笔者 最 大 限度 
地 关注 。 从 这 里 笔者 了 解 到 ， 原 来 他 们 并 没有 末 用 Cordova 目 市 的 MP3 播放 功能 ， 而 是 使 用 
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了 WebView 控件 来 实现 音乐 的 播放 。 





热门 单 曲 








天 马 行 空 - 《活着 》 


©) 
sn 
© 
中 


天 凉 好 个 秋 (MIX FM3) 


花 轮 同学 
MC 光 光 


15-1 豆瓣 音乐 人 的 界面 


这 与 笔者 一 直 以 来 对 Cordova 的 一 个 观点 不 谋 而 合 ， 虽 然 作 为 开发 者 都 很 热爱 这 种 能 够 
大 大 降低 工作 量 的 平台 ， 但 是 从 内 心中 并 不 能 完全 信任 它 。 这 一 点 主要 表现 在 要 尽量 少 地 使 
用 Cordova 所 提供 的 API， 而 主要 使 用 它 能 够 将 HTML 文件 打包 成 APP 的 功能 。 

根据 “豆瓣 音乐 人 ”开发 者 的 描述 ， 在 开发 这 款 应 用 时 ， 他 们 实际 上 仍然 编写 了 大 量 原 
生 代 码 来 实现 一 些 Cordova 无 法 提供 文 持 的 功能 ， 比 如 推送 信息 、 状 态 栏 提 醒 、 绑 定 社交 平 
台 账 号 等 。 由 此 可 见 ，“ 豆 为 音乐 人 ”的 开发 者 利用 Cordova 实现 了 一 球 不 逊色 于 原生 应 用 
的 应 用 。 

但 这 并 不 是 说 普通 开发 者 们 就 无 法 利用 Cordova 开发 出 好 的 应 用 了 ， 如 果 是 这 样 恐怕 这 
本 书 就 没有 多 大 意义 了 。 那 怎样 才能 够 在 开发 者 还 没有 掌握 非常 高 超 的 技术 水 平时 ， 就 能 够 
利用 Cordova 开发 出 高 水 平 的 应 用 呢 ? 那 就 是 尽量 只 使 用 HTML 5 中 提供 的 功能 ， 而 避免 使 
用 Cordova 提供 的 API。 

那么 哪些 功能 的 应 用 符合 这 样 的 需求 呢 ? 读者 首先 想到 的 大 概 是 游戏 ， 比 如 第 14 章 利 用 
简单 的 HTML 和 JavaScript 实现 了 “像素 鸟 ” 的 基本 功能 。 可 是 实际 上 这 游戏 并 不 好 玩 ， 而 
且 和 恐怕 许多 手机 的 处 理 器 还 不 足以 文 撑 起 足够 的 运算 量 〈 运 行 像素 鸟 已 经 足够 了 ， 但 是 再 复 
杂 一 些 的 游戏 ， 如 用 HTML 5 实现 一 坎 “ 愤 怒 的 小 乌 ” 就 很 难保 证 它 在 手机 上 不 卡 ) 。 

其 次 就 是 一 些 新 闻 类 应 用 了 ， 比 如 对 时 事 热点 的 浏览 、 类 似 “ 闹 事 百 科 ” 的 条 目 阅 读 ， 
甚至 是 某 个 领域 商品 信息 的 铺 排 。 这 些 都 是 个 人 开发 者 们 所 热衷 于 开发 的 应 用 ， 能 够 为 他 们 
带 来 快速 而 且 稳 定 的 收入 。 最 重要 的 是 仅仅 利用 JavaScript 就 可 以 实现 对 网 上 信息 的 获取 ， 
这 样 就 不 必 担 心 Cordova 中 API 的 种 种 不 如 意 了 。 

还 有 非常 重要 的 一 点 就 是 这 类 应 用 实现 起 来 比较 容易 ， 一 般 开 发 者 都 能 够 很 快 地 掌握 ， 
而 且 “ 换 装 ” 会 非常 简单 。 比 如 笔者 开发 了 一 款 浏 览 大 连 新 闻 的 应 用 ， 只 需要 将 数据 做 一 些 
修改 就 能 够 再 得 到 一 款 浏 览 青 岛 新 闻 的 应 用 ， 甚 至 改 成 浏览 宇宙 新 闻 都 是 很 容易 的 。 

因此 ， 本 章 就 利用 Cordova 实现 一 款 浏 览 新 闻 的 应 用 。 
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1 .2 项目 需 : 


本 章 所 需要 实现 的 功能 非常 简单 ， 只 需要 在 服务 端 生 成 新 闻 列 表 ， 然 后 在 手机 上 利用 
jQuery 的 Ajax 功能 获取 这 些 数据 ， 最 后 将 获取 的 数据 显示 出 来 即 可 。 

此 外 ， 本 项 目的 服务 端 将 采用 PHP， 因 为 PHP 的 资料 还 是 最 容易 找到 的 ， 并 且 常 用 的 
CMS〔 如 织 梦 、DISCUZ、PHPCMS 等 ) 均 采 用 了 PHP， 因 此 现 阶段 对 于 个 人 开发 者 来 说 ， 
PHP 是 最 合适 的 。 


1 与。:3。 界面 设计 和 实现 


首先 还 是 来 实现 对 界面 的 设计 ， 本 次 需要 的 界面 有 两 个 ， 分 别 是 首页 的 新 闻 列 表 和 氮 开 
东 个 列表 项 之 后 显示 的 具体 新 闻 内 容 。 


15.3.1 新 闻 列 表 的 设计 和 实现 
由 于 本 章 所 展示 的 仅仅 是 一 个 例子 ， 因 此 笔者 省 略 了 一 般 此 类 应 用 常用 的 图 片 轮 播 等 元 
素 ， 但 是 必 不 可 少 的 顶部 栏 仍然 得 到 了 保留 。 设 计 出 的 界面 如 图 15-2 所 示 。 


应 用 标题 :如 cordova 新 闻 
| 新闻 节目 列表 





15-2 新 闻 列 表 界 面 布 局 
为 了 保证 显示 的 效果 ， 需 要 将 顶部 栏 固定 在 屏 磋 的 底部 ， 而 中 央 的 新 闻 列 表 则 可 以 根据 
用 户 的 需要 进行 上 下 滑动 。 
具体 实现 方法 如 范例 15-1 所 示 。 
【范例 15-1】 新 闻 列 表 界 面 的 实现 。 
01 <!DOCTYPE html> 
02 <html> 
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Cy 
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DI 
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运行 后 得 到 界面 如 图 15-3 所 示 。 
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15-3 实现 后 的 新 闻 列 表 界 面 


在 header 元 素 中 使 用 了 属性 position:fixed 来 保证 项 部 栏 能 够 永远 固定 在 屏幕 顶部， 如 范 
例 第 22 行 所 示 。 在 具体 的 内 容 中 为 了 保证 其 中 的 列表 项 不 会 次 出 ， 葡 需要 对 它 的 overflow 
属性 进行 设置 ， 如 第 15 行 所 示 。 

除 此 之 外 ， 笔 者 将 不 再 对 本 范例 做 过 多 介绍 ， 请 读者 根据 注释 自行 对 范例 中 的 内 容 进 行 
理解 。 


15.3.2 ”新 闻 内 容 页 的 实现 

与 新 闻 列 表 的 设计 思想 相同 ， 具 体 的 新 闻 内 容 界面 也 采取 了 尽量 简单 的 设计 思想 ， 且 在 
本 范例 中 仅 显示 新 闻 的 题目 、 作 者 以 及 具体 内 容 。 此 外 为 了 保持 应 用 界面 的 一 致 性 还 要 为 新 
闻 内 容 界 面 加 入 与 新 闻 列表 相同 风格 的 顶部 栏 。 为 了 保证 用 户 在 看 完 一 条 新 闻 之 后 能 够 顺利 
地 返回 新 闻 列 表 查 看 其 他 新 闻 ， 因 此 还 要 在 头 部 栏 中 加 入 “返回 ”按钮 ， 最 终 布 局 如 图 15-4 
所 示 。 


坊 关于 “返回 ”按钮 的 位 置 一 直 是 移动 开发 领域 一 个 比较 有 争议 的 问题 ， 因 为 按照 一 般 
人 机 交互 的 理论 ， 应 当 将 操作 按钮 尽量 靠近 屏幕 的 右 下 方位 置 以 便 用 户 进 行 单 手 操 

作 。 但 是 通过 图 15-4 可 以 看 到 ， 放置“ 返回 ”按钮 的 位 置 恰恰 是 单 手 操作 最 难以 触 

碰 到 的 左上 角 。 读 者 可 以 将 其 理解 为 是 为 了 防止 用 户 因 为 误 触 而 有 意 为 之 ， 也 可 以 理 






解 为 是 习惯 所 致 。 
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15-4 新 闻 内 容 界面 布局 


该 界面 的 具体 实现 方法 如 范例 15-2 所 示 。 
【范例 15-2】 新 闻 内 容 界面 的 实现 。 
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所 实现 的 界面 运行 后 如 图 15-5 所 示 。 
返回 Cordova 新 闻 





15-5 最 终 实 现 的 新 闻 内 容 界 面 


读者 可 自行 阅读 代码 进行 理解 ， 这 里 只 介绍 第 78~85 行 处 的 CSS 样式 。 因 为 有 不 少 开 发 
者 在 实现 页 面 中 一 些 分 割 线 之 类 的 效果 时 都 会 采用 图 片 ， 这 样 对 开发 者 来 说 可 能 会 比较 方 
便 。 可 是 为 了 保证 页 面 的 加 载 速 度 而 且 为 今后 的 维护 考虑 ， 笔 者 建议 页 面 中 的 元 素 还 是 尽量 
使 用 CSS 来 实现 。 





245 





Apache Cordova 移动 应 用 开发 实战 


15.3.3 ”界面 的 进一步 整合 

前 面 的 内 容 已 经 实现 了 新 闻 列 表 和 新 闻 内 容 页 的 设计 ， 不 过 现在 还 有 一 个 问题 。 那 就 是 
由 于 本 项 目 使 用 Cordova 完成 ， 因 此 在 客户 端 只 有 JavaScript 脚本 可 以 使 用 ， 这 就 使 得 如 何 
在 两 个 页 面 间 传 递 数据 成 为 一 个 难题 ， 虽 然 说 HTML 中 提供 了 window.location.search 的 方法 
来 实现 在 HTML 间 进 行 参 数 传递 ， 可 这 上 毕竟 还 是 不 太 方 便 ， 有 没有 能 够 奉 代 它 的 方案 呢 ? 

回想 本 书 中 介绍 过 的 知识 ， 本 地 存储 也 许 是 个 不 错 的 想法 ， 其 实 还 有 更 好 的 办 法 。 因 为 
本 项 目 中 实际 上 只 有 两 个 页 面 ， 可 以 利用 JavaScript 将 它们 整合 到 一 个 页 面 中 ， 不 但 能 够 有 
效 提高 页 面 间 切 换 的 速度 ， 而 且 能 够 减少 一 些 不 必要 的 流量 浪费 。 

【范例 15-3】 将 两 页 和 面 整 合 为 一 个 页 面 。 
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运行 之 后 屏幕 上 显示 首页 新 闻 列 表 界 面 ， 用 户 随 意 点 击 一 条 新 闻 标 题 页 面 内 容 ， 就 会 切 
换 到 新 闻 内 容 界 面 ， 而 当 用 户 再 点 击 左上 角 的 “返回 ”按钮 时 ， 界 面 则 会 返回 到 新 闻 列 表 界 
面 中 去 。 





与 . 纪 利用 Ajax 获取 服务 器 上 的 信息 


界面 实现 之 后 ， 要 做 的 就 是 想 办 法 将 从 网 络 上 得 到 的 信息 显示 在 屏幕 上 了 。 这 时 就 遇 到 
了 一 个 巨大 的 难题 : 怎样 获取 网 络 上 的 信息 。 这 对 Web 开发 者 来 说 似乎 非常 容易 ， 因 为 他 们 
只 需要 选择 一 门 脚本 语言 (ASP、PHP、JSP 甚至 Ruby) 将 要 显示 的 内 容 上 传 到 服务 器 上 ， 
用 户 就 可 以 通过 浏览 器 进行 访问 了 。 

但 是 对 于 Cordova 开发 者 来 说 就 变 得 非常 困难 了 ， 排 除 掉 难 以 获得 信任 的 API， 可 以 使 
用 的 只 剩 下 HTML、CSS 和 JavaScript 了 。 准 确 点 说 ， 在 实现 获取 来 自 网 络 的 信息 这 一 点 
上 上， 能 依 徘 的 只 剩 下 JavaScript 了 。 


15.4.1 Ajax 的 一 个 简单 实例 

好 在 JavaScript 为 开发 者 提供 了 一 种 可 以 与 服务 器 进行 异步 交换 数据 并 能 够 对 页 面 进行 
更 新 的 技术 ， 叫 做 Ajax。 笔 者 毫 不 客气 地 说 ， 不 用 异步 ， 只 要 能 更 新 数据 就 足够 了 。 这 就 是 
范例 15-4 所 实现 的 功能 。 

【范例 15-4】 使 用 Ajax 获取 JSON 数据 。 
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此 外 ， 还 需要 在 同一 目录 下 保存 内 容 { "firstName": "Bill","lastName": "Gates","age": 60} 到 | 
文件 testjs 中 去 。 之 后 运行 范例 15-4， 点 击 屏 磋 上 的 文字 ， 结 果 如 图 15-6 所 示 (被 框 起 来 的 
部 分 是 利用 Ajax 从 test.js 文件 中 读 出 的 数据 ) 。 


Gates 60 
点 击 这 里 获取 数据 


15-6 利用 Ajax 获取 其 他 文件 中 的 JSON 数据 


接 下 来 要 做 的 就 是 将 testjs 上 传 到 服务 器 ， 读 者 可 以 使 用 Xampp、AppServ 等 一 键 安装 
包 在 Windows 下 安装 Apache 以 及 PHP 服务 器 环境 。 安 装 完 成 后 可 以 在 如 图 15-7 所 示 的 面板 
中 局 动 服 务 器 。 

将 test.js 文件 上 传 到 Apache 根 目录 之 后 ， 将 范例 15-4 的 第 11 行 修 改 为 : 


然后 再 运行 修改 后 的 范例 发 现 已 经 无 法 获取 testjs 中 的 JSON 数据 了 ， 但 是 如 果 将 范例 
代码 也 一 同 复制 到 Apache 根 目录 下 ， 通 过 浏 贤 费 执行 范例 确实 能 够 获取 JSON 数据 。 这 就 说 
明了 代码 上 是 没有 错误 的 ， 可 是 到 底 古 哪里 出 了 错误 呢 ? 

问题 出 在 了 jQuery 的 geUSON 方法 上 ， 虽 然 可 以 通过 Ajax 访问 其 他 文件 或 者 页 面 上 的 
数据 ， 但 是 出 于 安全 考虑 却 要 求 这 两 个 页 面 必须 处 在 同一 个 “ 域 ” 中 ， 这 下 就 肪 烦 了 ， 好 不 
容易 想到 了 获取 数据 的 方法 却 不 能 使 用 ， 这 该 如 何 是 好 啊 。 
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Welcome “Manage Servers Application log 





Server Status 
© MySQL Database Running 
各 ProFTPD Stopped 
© Apache Web Server Running Stop 
Restart 
Configure 
Start All Stop All Restart All 


15-7 Xampp 的 控制 面板 


15.4.2 ”JavaScript 跨 域 解决 方法 
以 上 我 们 所 使 用 的 获取 JSON 数据 的 方法 由 于 跨 域 的 原因 失败 了 ， 但 是 实际 上 通过 以 上 
例子 已 经 非常 接近 最 终 的 真相 了 。 在 揭示 解决 方法 之 前 笔者 决定 先 来 解释 一 下 什么 是 跨 域 。 
跨 域 问题 是 JavaScript 安全 体系 中 为 了 防止 一 些 不 安全 的 调用 而 设计 的 一 种 同 源 策略 ， 
具体 如 表 15-1 所 示 。 


表 15-1 JavaScript 中 的 同 源 策略 
说 明 是 否 允 许 通 信 


同一 域名 下 同一 目录 全 
同一 域名 下 不 同 目录 
同一 域名 下 不 同 并 


pttp:/www.aa.com/ajs http:/www.bia.com/bjs 





在 实际 运行 Cordova 时 ， 显 然 古 处 于 不 同 域名 下 的 情况 (甚至 就 是 两 个 没有 关系 的 
IP) ， 在 同 源 策略 中 是 不 允许 它们 进行 通信 的 。 但 是 这 难 不 倒 伟大 的 程序 员 们 ， 他 们 发 现 了 
许多 可 以 突破 这 种 限制 的 方法 ， 比 如 范例 15-5。 
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【范例 15-5】 使 用 引入 的 方式 获取 JSON 数据 。 





此 外 还 需要 对 上 传 到 服务 器 上 的 文件 testjs 做 一 些 修改 ， 修 改 后 的 内 容 为 : 


然后 再 运行 本 范例 就 可 以 发 现 已 经 能 够 实现 跨 域 获取 JSON 数据 了 ， 如 图 15-8 所 示 。 


Bill 
Gates 
60 


点 击 这 里 获取 数据 


15-8 从 服务 器 上 获取 的 JSON 数据 
这 样 一 来 读者 可 能 就 明白 了 ， 只 要 能 够 在 服务 器 端 生成 相应 的 数据 ， 就 能 够 很 容易 地 利 
用 这 种 方法 来 实现 信息 获取 。 
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在 实际 开发 中 ， 常 常 使 用 类 似 的 原理 将 一 些 内 容 进 行 封装 ， 然 后 利用 jQuery 中 的 Ajax 
来 提供 对 刷新 等 功能 的 支持 。 本 项 目 主要 是 为 了 展示 原理 ， 因 此 不 考虑 这 些 功能 。 


一 
/三 访 








15.4.3 ”服务 端的 实现 

现在 要 做 的 就 是 利用 PHP 来 实现 服务 端 JSON 数据 的 生成 了 ， 实 际 上 不 过 是 从 数据 库 读 
取信 息 ， 然 后 对 字符 串 做 一 些 简 单 地 拼接 ， 因 此 很 容易 实现 。 在 最 开始 还 是 要 设计 这 次 所 使 
用 的 数据 库 。 由 于 数据 量 不 大 ， 可 以 仅 设 计 两 个 表 来 实现 ， 这 两 个 表 分 别 记 录 了 新 闻 列 表 、 
作者 等 内 容 的 news_List 表 和 记录 了 每 条 新 闻 具 体内 容 的 表 news_Neirong。 它 们 的 具体 结构 
如 表 15-2 和 表 15-3 所 示 。 


表 15-2 表 news_List 的 数据 结构 
说 明 


计 | mt | 用 水 表示 每 -条 新 闻 的 ij， 它 的 信息 只 一 的 


用 来 记录 新 闻 的 作者 
用 来 记录 新 闻 发 生 的 日 期 
新 闻 的 标题 





表 15-3 表 news_Neirong 的 数据 结构 


刘 |im | 用 水 表示 每 -条 新 闻 的 ia， 它 的 信息 唯一 的 
comtent | (ex | 新 闻 的 具 休 内 容 


接 下 来 在 服务 器 根 目录 下 新 建 一 个 文件 ， 命 名 为 testphp， 按 照 范例 15-6 中 的 内 容 进行 
编辑 。 
【范例 15-6】 利 用 PHP 生成 JSON 数据 。 
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保存 范例 文件 ， 并 在 浏览 器 中 输入 地 址 http://127.0.0.1/test.php， 可 以 看 到 如 图 15-9 所 示 
的 数据 。 


var json = [{“title“: “第 二 条 新 闻 ″ “author”:“ 猫 创 ”， 有 “我 刚刚 下 


楼 吃 了 碗 拉面 ， 结果 发 现 好 像 泡 面 会 更 好 吃 一 点 ” }, {“title”:“ 第 一 条 新 闻 ”, :“ 猫 
爷 “, “date”:”2014-04-07”, “content”:“ 这 是 第 一 条 新 闻 ， 用 于 对 第 15 章 中 的 希 自 进行 测 斌 。 2 





15-9 利用 PHP 生成 的 JSON 数据 


但 是 现在 有 一 个 问题 ， 在 范例 15-5 中 引入 的 是 一 个 后 级 为 js 的 文件 ， 虽 然 可 以 认为 这 是 
JSON 的 缩写 ， 但 是 这 并 不 影响 浏览 器 将 它 作 为 标准 的 JavaScript 脚本 文件 来 解析 。 而 在 本 范 
例 中 返回 的 地 址 是 一 个 PHP 文件 ， 这 会 不 会 影 啊 读 取 的 效果 呢 ? 因此 还 需要 使 用 范例 15-5 
中 的 方法 再 做 一 次 测试 。 

【范例 15-7】 测 试 从 PHP 页 面 中 获取 的 JSON 数据 。 
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运行 后 点 击 屏幕 上 的 “点 击 这 里 获取 数据 ”字样 ， 可 以 看 到 确实 能 够 从 PHP 页 面 上 获取 
到 数据 ， 如 图 15-10 所 示 。 


第 二 条 新 闻 猫 爷 2014-04-07 我 刚刚 下 楼 吃 了 碗 拉面 ， 结 果 发 现 好 像 泡 面 会 更 好 吃 一 点 
第 一 条 新 闻 猫 簿 2014-04-07 这 是 第 一 条 新 闻 ， 用 于 对 第 15 章 中 的 项 目 进行 测试 。 


点 击 这 里 获取 数据 





15-10 从 PHP 页 面 中 获取 的 JSON 数据 


这 是 为 什么 呢 ? 简单 地 说 ， 就 是 由 于 在 范例 的 第 10 行 中 ， 对 script 标签 进行 设置 时 为 它 
设置 了 一 个 属性 type="text/javascript"， 这 样 一 来 浏览 器 进行 解析 的 时 候 不 管 这 是 一 个 什么 类 
型 的 文件 都 会 以 JavaScript 的 形式 去 执行 其 中 的 内 容 。 也 就 相当 于 是 在 一 个 外 部 的 js 

(JavaScript) 文件 中 定义 了 一 组 JSON 数据 是 一 样 的 ， 只 不 过 这 里 的 JSON 数据 是 由 PHP 动 
态 生 成 的 。 
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1 ,了 让 数据 显示 出 来 


在 实现 了 从 服务 端 读 取 数 据 的 功能 之 后 接 下 来 的 工作 就 比较 轻松 了 ， 只 需要 将 这 些 数据 
在 之 前 写 好 的 HTML 页 面 中 显示 出 来 ， 然 后 利用 Cordova 打包 就 可 以 了 。 为 了 方便 读者 学 
习 ， 笔 者 将 先 在 范例 15-1 和 范例 15-2 的 基础 上 进行 展示 ， 然 后 再 将 完整 的 代码 整合 到 范例 
15-3 中 实现 的 界面 上 去 。 首 先 来 实现 新 闻 列 表 的 显示 。 


15.5.1 新闻 列表 的 显示 
找到 范例 15-1 的 文件 ， 按 照 范 例 15-8 对 它 进行 修改 。 
【范例 15-8】 新 闻 列 表 的 显示 。 
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运行 后 的 结果 如 图 15-11 所 示 。 


Cordova 新 闻 





15-11 将 服务 端的 JSON 数据 显示 在 新 闻 列 表 中 


可 以 看 到 ， 相 对 于 范例 1$-1， 变 化 其 实 并 不 大 ， 仅 有 两 个 主要 的 变化 。 第 一 是 在 代码 的 
开头 引入 了 JSON 源 ， 即 第 7 行 。 其 次 就 是 在 第 24~43 行使 用 了 字符 拼接 得 到 了 一 段 HTML 
脚本 ， 然 后 利用 document.write 方法 将 这 段 脚本 显示 出 来 。 

除 此 之 外 ， 在 这 段 代 码 中 还 加 入 了 一 个 新 的 和 目 定义 函数 show_new(i)。 这 是 用 来 作为 今后 
显示 新 闻 内 容 时 对 用 户 点 击 操作 预 留 的 接口 ， 在 此 可 不 用 管 它 。 目 前 ， 当 用 户 点 击 新 闻 列 表 
时 ， 该 函数 会 弹出 一 个 对 话 框 告诉 用 户 这 是 第 几 条 新 闻 。 
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此 处 笔者 需要 说 明 一 下 ， 为 什么 笔者 要 选用 document write 这 种 方式 来 在 页 面 上 显示 数 
据 ， 而 不 采用 JavaScript 中 的 一 些 DOM 方法 动态 地 对 内 容 进 行 布置 ? 笔者 这 样 做 主要 有 两 个 
原因 : 第 一 是 因为 在 本 范例 中 要 在 页 面 一 打开 时 就 将 获取 的 数据 显示 出 来 ， 虽 然 说 JSON 数 
据 量 比较 小 ， 能 够 快速 地 获取 到 来 自 网 络 的 JSON 数据 ， 但 是 毕竟 是 需要 时 间 的 。 如 果 在 页 
面 一 打开 时 就 自动 对 数据 进行 动态 地 显示 ， 也 会 导致 实际 上 什么 数据 也 没有 获取 到 就 显示 
了 ， 这 显然 是 不 行 的 。 另 一 个 原因 就 是 这 样 做 很 价 单 ， 好 理解 。 


15.5.2 ”新 闻 内 容 的 显示 
与 新 闻 列 表 相 比 ， 要 在 页 面 上 显示 出 新 闻 的 内 容 实在 是 太 简单 了 ， 因 为 在 这 里 不 需要 考 
虑 一 共有 多 少 条 数据 。 这 次 将 在 范例 15-2 的 基础 上 进行 修改 ， 具 体 方法 如 范例 15-9 所 示 。 
【范例 15-9】 将 新 闻 内 容 显 示 出 来 。 
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震 要 注意 的 是 ， 在 运行 本 范例 时 需要 先 点 击 一 下 屏幕 才能 获取 到 ， 如 图 15-12 所 示 ， 这 
也 是 由 于 如 果 下 接 获取 显示 数据 的 操作 可 能 在 获取 数据 之 前 实现 而 产生 错误 所 采取 的 变通 之 
法 。 乍 一 看 这 可 能 会 让 茶 些 用 户 筑 得 很 不 夷 ， 但 是 再 一 想 这 个 页 面 本 来 驶 是 需要 通过 点 击 来 
实现 的 ， 因 此 倒是 没有 什么 需要 担忧 的 了 。 


Cordova 





15-12 单 击 进 入 新 闻 详 情 页 面 


15.5.3 ”最 终 的 整合 


至 此 ， 该 项 目的 全 部 功能 就 已 经 实现 了 ， 现 在 要 做 的 就 是 将 这 两 个 页 面 结合 在 一 起 ， 请 
各 位 读者 找到 范例 15-3 的 代码 ， 参 照 本 节 介 绍 的 范例 15-8 和 范例 15-9 进行 修改 。 修 改 后 的 
内 容 如 范例 15-10 所 示 。 
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【范例 15-10】 最 终 实现 的 新 闻 客 户 端 页 面 
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76 // 生成 <div class="1ist title"> 
TF str = Str + '<div class=""} 
78 Er Ee A Eel 
79 // 加 入 新 闻 标 题 

80 ste = gbr + Son Elitlieos 
81 // 生成 </div></div> 

82 str = str 4 ‘</div></div>'} 
83 document .write (str); 

84 } 

85 /ooript> 

86 Ae bp 

87 </div> 

88 </body> 

90 </html> 


这 样 一 来 就 可 以 一 个 独立 应 用 的 形式 运行 了 。 双 击 之 后 显示 的 是 新 闻 列 表 ， 如 图 15-13 
所 示 ， 点 击 任意 一 个 列表 项 则 会 切换 到 相应 的 新 闻 内 容 界 和 面 ， 如 图 15-14 所 示 ， 再 点 击 “ 返 
回 ” 按 钮 又 将 回 到 新 闻 列 表 界 面 。 


Ti 


Cordova 





15-13 ”新 闻 列 表 15-14 新 闻 内 容 界 面 


下 徊 笔者 再 来 讲解 一 下 实现 的 思路 (不 是 代码 的 原理 ， 而 是 怎样 由 范例 15-8 和 范例 15-9 
得 到 该 范例 ) 。 首 先 ， 在 范例 15-3 中 己 经 准备 好 了 两 个 界面 之 间 切 换 的 功能 ， 但 是 它 在 内 容 
的 显示 方面 仍然 是 “静态 的 ”， 即 无 法 从 服务 端 获取 数据 。 因 此 第 一 部 就 是 引入 外 部 的 
JSON 数据 ， 如 范例 第 7 行 所 示 。 

接 下 来 就 是 将 这 些 数据 在 列表 中 显示 ， 如 范例 第 66~85 行 所 示 ， 与 范例 15-8 中 完全 一 
样 ， 直 接 复 制 就 可 以 了 。 由 于 此 处 引用 了 一 个 日 定义 函数 show_new()， 因 此 需要 把 该 函数 一 
起 复制 过 来 。 但 是 此 时 该 函数 束 应 当 能 够 发 挥 一 些 作用 了 ， 比 如 页 面 间 的 跳 转 。 
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除 此 之 外 ， 由 于 新 闻 编 号 在 该 自 定义 函数 中 被 当 作 参 数 传 递 ， 因 此 可 以 通过 该 函数 来 实 
现 新 闻 内 容 的 加 载 〈 范 例 第 32~41 行 ) 。 


由 于 在 此 处 使 用 innerHTML 方法 会 直接 替换 掉 之 前 写 在 元 素 中 的 内 容 ， 因 此 不 需要 考虑 





当 第 二 次 打开 新 闻 内 容 时 内 容 会 不 会 重 伙 的 问题 。 


最 后 ， 就 可 以 将 整个 HTML 文件 复制 到 Cordova 中 进行 测试 了 ， 不 过 还 是 要 提醒 读者 ， 
如 果 是 在 真 机 上 进行 测试 的 话 ， 不 要 环 记 连接 网 络 。 还 有 ， 如 果 是 使 用 一 键 安 装 的 Apache， 
可 能 默认 是 不 能 被 外 网 访问 的 ， 需 要 在 httpd-xampp.conf 文件 中 找到 一 行内 容 为 Deny from all 
的 语句 用 “#” 注 释 掉 。 


I 9.6 小 结 


到 此 为 止 ， 一 球 具 有 一 定 实 用 价值 的 新 闻 客 户 端 就 算是 做 好 了 ， 而 且 笔 者 甚至 可 以 双 不 
客气 地 说 ， 本 章 押 使 用 的 这 个 例子 要 比 许多 真正 上 线 的 原生 安里 新 闻 应 用 要 “好 用 ”得 多 ， 
而 且 它 实现 起 来 非常 简单 ， 最 重要 的 是 除了 最 终 的 测试 ， 其 他 所 有 步骤 笔者 都 是 通过 PC 端 
的 浏览 右 来 进行 的 ， 这 使 得 笔者 在 开发 时 不 必 对 独 那个 令 人 人 尾 恼 的 模拟 器 较劲 了 。 如 果 读 者 
对 它 有 更 高 的 期 望 就 可 以 尝试 为 它 加 入 一 些 更 加 人 性 化 的 功能 ， 比 如 可 以 在 新 闻 中 插入 图 片 
使 内 容 更 加 丰 蜗 ， 也 可 以 从 网 上 寻找 一 些 具有 下 拉 刷 新 功能 的 插件 加 入 到 列表 中 ， 使 用 尸 能 
够 以 更 加 舒适 的 方式 获取 到 信息 。 随 看 新 加 入 的 功能 越 来 越 多 ， 这 于 简单 的 “客户 端 ” 最 终 
很 可 能 会 成 为 一 球 具 有 强大 功能 与 交互 性 的 真正 的 大 型 新 闻 客 户 亲 。 
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前 面 两 章 已 经 介绍 过 两 个 利用 Cordova 实际 开发 应 用 的 例子 ， 但 是 这 两 个 例子 作为 Cordova 教 
程 中 的 实例 都 有 一 个 致命 的 缺点 ， 就 是 没有 真正 用 到 Cordova 中 的 API。 本 章 所 介绍 的 实例 将 弥 
补 这 个 不 足 ， 利 用 Cordova 中 的 联系 人 对 象 制作 一 款 电话 号 码 本 。 此 外 本 章 还 要 补充 一 个 在 之 前 
的 内 容 中 遗漏 的 重要 知识 点 ， 那 就 是 在 Cordova 中 自 定义 插件 的 方法 ， 本 章 将 利用 此 方法 来 实现 
Cordova 的 电话 拨号 功能 。 

另外 ， 本 章 将 使 用 jQuery Mobile 来 生成 应 用 的 界面 ， 读 者 不 用 再 忍受 笔者 制作 的 那 种 简陋 而 且 
难看 的 界面 了 。 


本 章 的 主要 知识 点 有 : 


@ 使 用 jQuery Mobile 来 实现 界面 ， 以 及 利用 JavaScript 动态 加 载 页 面 中 的 内 容 。 
@ 如何 将 Cordova 中 读 取 的 联系 人 信息 加 载 到 应 用 中 。 
@ Cordova 插件 的 制作 方法 。 


项 目 介绍 


本 章 将 要 模仿 实现 一 球 人 简单 的 电话 号 码 本 的 功能 ， 包 括 了 对 联系 人 列表 的 查看 、 新 建 联系 
人 、 删 除 联系 人 以 及 拨打 电话 、 发 送 短 信 等 功能 。 在 设计 这 款 应 用 之 前 可 以 参考 安 卓 系统 自 带 的 
联系 人 界面 ， 如 图 16-1 所 示 。 








图 16-1 安 早 目 带 联 系 人 界面 
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可 以 通过 “新 建 联系 人 ”进入 如 图 16-2 所 示 的 界面 ， 用 户 可 以 在 其 中 创建 新 的 联系 人 。 
当然 也 可 以 点 开 茶 个 具体 的 联系 人 来 对 联系 人 的 资料 进行 编辑 或 会 看 ， 如 图 16-3 所 示 。 


dl 厅 Zc 


完成 创建 : (A New Contact 


Phone-only, unsynced contact 苇 


插入 联系 人 的 姓名 、 


Add organization 





PHONE 

插入 联系 人 的 电话 ome ， 
EE 

Add new 


EMAIL PHONE 


295342663 人 qq.com HOME 1 337-777-7777 
& el MOBII 


EMAIL 


295342663@qq.com 
HOME 


16-2 ”新建 联系 人 的 界面 16-3 ”可 在 该 界面 得 看 菜 联 系 人 的 具体 信息 


此 外 ， 还 可 以 直接 通过 联系 人 的 界面 对 联系 人 进行 拨号 ; 而 在 本 半 中 就 将 要 实现 一 蒜 有 类 似 
功能 的 应 用 ， 但 是 要 根据 实际 需要 简单 地 调整 。 


为 Cordova 编写 插件 


通过 之 六 的 分 析 ， 相 信 读 者 已 经 对 本 草 的 项 目 有 了 大 概 了 解 ， 然 而 本 项 目 有 一 个 重要 的 功能 
是 利用 本 草 实 现 的 APP 完成 发 送 短信 和 拨打 电话 的 功能 ， 可 是 通过 本 书 的 学 习 ， 读 者 应 该 已 经 
了 解 到 在 Cordova 中 并 没有 提供 实现 这 两 个 功能 的 API。 当 然 可 以 用 一 些 办 法 来 糊弄 用 户 ， 比 如 
用 户 点 击 人 代表“ 发 送 ” 功 能 的 按钮 后 弹出 一 个 对 话 框 “对 不 起 ， 该 功能 正在 开发 中 ， 窜 请 期 
待 ”。 但 是 历史 告诉 笔者 这 绝对 会 在 招来 用 户 的 驼 加 之 前 ， 先 招来 读者 的 咒骂 ， 因 此 只 能 寻找 其 
他 办 法 。 

笔者 一 直 坚 信和 拿 来 主义 ， 有 现成 的 为 什么 不 用 ? 但 是 当 没 有 现成 的 工具 可 以 使 用 时 ， 笔 者 也 
不 会 随意 问 需 求 认输 。 本 节 将 亲 卓 来 实现 利用 Cordova 发 送 短信 和 打 电 话 的 功能 插件 ， 来 弥补 
Cordova 的 不 足 。 


16.2.1 ”实现 发 短信 的 插件 


本 小 节 首 先 详细 地 介绍 了 Cordova 开发 短信 插件 的 方法 ， 也 顺便 让 读者 了 解 是 怎样 为 
Cordova 加 入 自己 需要 的 API 的 。 
一 般 标准 的 Cordova 的 插件 的 机 构 如 图 16-4 和 图 16-5 所 示 。 
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画 src > | jios ! CordovaPlugin.h 
有 www ”CordovaPlugin.m 
开发 者 


plugin.xml 











MN src 


开发 者 


plugin.xml 











16-5 插件 目录 2 
目录 中 的 CordovaPlugin.js 是 用 来 连接 Cordova 和 iOS 原生 代码 的 文件 ， 代 码 如 下 : 
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有 了 这 一 段 代 码 ， 就 可 以 理解 整个 插件 的 原理 了 。 

在 Cordova 提供 的 大 多 数 API 中 都 会 用 到 success 和 error 作为 参数 分 别 用 来 调用 API 使 用 
成 功 和 失败 。 除 此 之 外 ， 该 API 应 该 还 有 两 个 参数 ， 分 别 保存 短信 发 送 的 目标 号 码 和 短信 的 内 

exec() 方 法 的 参数 是 不 是 和 定义 的 API 参数 非常 类 似 ， 只 是 多 了 一 个 值 为 send 的 参数 。 再 回 
头 看 范例 16-1 的 第 18 行 ， 就 是 将 接收 到 的 来 自 HTML 页 面 的 参数 与 常量 SEND 做 比较 。 而 常 
量 SEND 的 值 又 恰恰 是 send。 

这 下 应 该 明白 了 吧 ，exec 是 Cordova 中 定义 的 一 个 方法 ， 它 能 够 将 一 些 参数 发 送 给 系统 ， 
在 本 例 中 被 类 Message 接收 并 处 理 。 有 读者 可 能 要 问 为 什么 系统 会 知道 这 个 方法 要 由 Message 类 
来 处 理 呢 ? 因为 在 exec() 方 法 的 第 三 个 参数 中 已 经 说 明了 处 理 这 个 请 求 的 类 名 为 Message。 

plugin.xml 包含 了 插件 的 配置 信息 ， 里 面 的 代码 如 下 : 





267 


Apache Cordova 移动 应 用 开发 实战 





CordovaPlugin.h 和 CordovaPlugin.m 文件 是 iOS 的 原生 文件 ， 可 以 通过 下 面 方法 生成 。 
首先 在 项 目 中 新 建 一 个 类 ， 命名 为 CordovaPlugin， 如 图 16-6 所 示 ， 并 让 它 继承 类 
CDVPlugin， 在 其 中 编写 代码 ， 如 下 所 示 。 


Class: CordovaPlugin 
Subclass of: CDVPlugin 
_ | Also create XIB file 


Language: Objective-C 








16-6 在 xcode 里 面 添加 插件 所 需 原生 文件 


CordovaPlugin.h 的 声明 : 





Message.m 的 实现 : 
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之 后 保存 编写 的 代码 。 






最 后 在 命令 行 中 运行 指令 添加 插件 : 


接 下 来 就 可 以 在 手机 上 测试 这 个 插件 是 不 是 真 的 有 效 了 ， 使 用 方法 如 范例 16-1 所 示 。 
【范例 16-1】 使 用 Cordova 发 送 短信 。 
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连接 手机 配置 好 相应 的 证 书后 ， 编 谋 运 行 ， 点 击发 送 短信 ， 就 可 以 调整 到 手机 短信 发 送 页 
面 ; 而 且 ， 页 面 已 经 填写 了 收 件 人 ， 只 需要 添加 内 容 就 可 以 了 ， 如 图 16-7 所 示 。 





SS 
新 信息 取消 





收 件 人 : 10010、 


驳 倡 卡 淮 妈 ， 邓 为 其 亿 

、 固 话 、 小 灵通 充 
值 ， 请 先 回复 被 充值 号 
码 。 如 为 固 话 、 小 灵通 
号 码 前 须 添加 区 





1 





16-7 ” 跳 转 到 短信 发 送 页 面 
细心 的 话 会 发 现 点 击发 送 后 ， 会 直接 返回 到 我 们 的 demo 页 面 。 


16.2.2 为 Cordova 编写 电话 拨号 插件 


以 上 实现 了 一 个 在 Cordova 中 不 具备 的 功能 一 一 短信 发 送 ， 本 小 节 来 实现 利用 Cordova 打 电 
话 的 插件 。 





【范例 16-2】 在 Message.m 中 添加 实现 call 方法 的 代码 。 
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接 下 来 再 编写 对 应 的 JavaScript 文件 ， 直 接 在 CordovaPlugin.js 中 加 入 以 下 内 容 : 





由 于 代码 与 前 面 所 讲 类 似 ， 这 里 就 不 再 做 讲解 了 ， 请 读者 目 行 对 比 代 码 进行 理解 。 


1@.3 界面 设计 


以 上 通过 编写 插件 的 方式 实现 了 利用 Cordova 拨打 电话 和 发 送 短信 的 功能 ， 而 Cordova 本 映 
又 提供 了 对 联系 人 信息 的 获取 功能 ， 也 就 是 说 目前 想 要 实现 这 球 号 码 本 应 用 的 全 部 功能 都 是 可 以 
的 了 。 此 时 残 可 以 放心 大 胆 地 进行 界面 的 设计 了 。 

我 们 要 实现 的 主要 功能 就 是 对 联系 人 的 创建 、 删 除 以 及 通过 联系 人 来 进行 打 电话 或 发 送 短信 
的 操作 。 

该 应 用 最 主要 的 界面 应 当 是 一 个 列表 ， 观 察 图 16-1 中 的 界面 会 发 现 安 畦 上 自 带 的 联系 人 列表 
中 并 没有 列 出 联系 人 的 号 码 ， 笔 者 刚 发 现 这 一 点 的 时 候 党 得 有 些 不 可 思议 ， 但 当 笔者 经 过 了 仔细 
思考 后 终于 发 现 这 种 做 法 在 某 种 程度 上 是 非常 合情合理 的 。 

因为 对 用 户 来 说 只 要 知道 电话 将 拨 给 哪个 联系 人 即 可 ， 而 不 需要 知道 这 个 人 的 号 码 具 体 是 多 
少 ， 这 对 于 手机 屏幕 上 有 限 的 空间 来 说 是 非常 有 必要 的 。 因 此 在 本 项 目 中 也 不 会 将 联系 人 的 号 码 
显示 在 联系 人 列表 中 。 

此 外 ， 在 本 项 目 中 将 取消 列表 中 的 联系 人 头像 ， 毕 竞 现 在 越 来 越 多 的 人 开始 愿意 购买 一 部 廉 
价 的 安 捍 手机 作为 备用 机 使 用 。 他 们 只 需要 这 部 手机 能 够 打 电 话 就 可 以 了 ， 而 且 许 多 人 也 懒得 为 
每 一 个 联系 人 加 入 照片 头像 ， 但 是 每 次 打 电话 时 看 独 空 白 的 头像 又 会 感到 别扭 ， 索 性 笔者 就 取消 
这 一 功能 好 了 。 
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除 此 之 外 还 要 在 界面 的 底部 保留 让 用 户 添加 联系 人 的 按钮 ， 最 终 设计 出 的 联系 人 列表 如 图 
16-8 所 示 。 其 中 ， 顶 部 栏 仅 作 装 饰 使 用 ， 也 可 以 根据 需要 加 入 “退出 ”按钮 ， 底 部 栏 是 一 个 按 
钮 ， 用 于 新 建 联系 人 使 用 。 顶 部 栏 俩 下 的 地 方 是 一 个 搜索 栏 ， 用 于 得 找 联 系 人 使 用 ， 而 页 面 的 主 
要 衬 间 则 被 联系 人 列表 占据 。 列 表 中 的 每 一 项 分 为 两 部 分 ， 其 中 左 侧 显示 联系 人 的 姓名 或 是 昵称 ， 
点 击 之 后 则 会 目 动 癌 该 联系 人 拨打 电话 ; 右 侧 是 一 个 图 标 ， 点 击 之 后 则 会 跳 转 到 短信 发 送 页 面 。 

由 此 可 知 ， 该 项目 中 还 需要 短信 发 送 和 新 建 联系 人 两 个 界面 ， 分 别 如 图 16-9 和 图 16-10 所 示 。 

其 中 ， 图 16-9 展示 的 是 短信 编辑 和 发 送 的 界面 ， 可 以 在 其 中 编辑 短信 内 容 并 通过 抵 部 的 
“发 送 ”按钮 发 送 短信 ， 也 可 以 点 击 左上 角 的 “返回 ”按钮 取消 短信 编辑 并 返回 到 联系 人 列表 中 
去 。 除 此 之 外 ， 还 应 当 能 将 短信 发 送 的 目标 在 项 部 栏 中 显示 出 来 ， 比 如 当 笔 者 给 10086 发 送 短信 
时 就 应 当 显 示 出 “发 送 给 : 10086”。 

联系 人 列表 oo 大 本 要 返 新 建 联系 人 


联系 人 姓名 : 


J 


联系 人 电话 号 码 : 


| | 





十 
十 


一 


联系 人 八 


” ”新建 联系 人 发 送 Cs 





16-8 ”设计 好 的 联系 人 列表 16.9 短信 编辑 和 发 送 界 面 设计 。 图 16-10 新 建 联系 人 界面 设计 


图 16-10 展示 出 的 是 该 项 目 新 建 联系 人 的 界面 ， 对 比 图 16-2 中 的 安 捍 原生 新 建 联系 人 界面 
会 发 现 ， 笔 者 设计 的 界面 在 功能 上 要 简单 了 许多 ， 许 多 功能 《比如 邮箱 和 地 址 ) 都 被 笔者 有 意识 
地 省 略 了 。 读 者 可 以 思考 一 下 ， 上 日常 生活 中 有 多 少 人 能 够 使 用 到 这 些 选项 呢 ? 最 简单 的 往往 也 是 
最 方便 的 。 

与 笔者 在 图 16-9 中 所 展示 的 短信 编辑 界 徊 类 似 ， 用 户 也 可 以 通过 左上 角 的 “返回 ” 殷 钮 取 
消 当 前 的 操作 ， 而 短信 顷 辑 界面 底部 的 “发 送 ”按钮 在 “新 建 联系 人 ”界面 中 则 被 奉 换 成 了 “ 保 
存 联 系 人 ”， 用 户 可 以 通过 它 来 保存 输入 的 联系 人 以 及 号 码 。 


展示 在 完成 这 三 个 界面 的 设计 之 后 笔者 突然 有 一 个 发 现 ， 那 就 是 笔者 这 次 所 设计 出 的 界面 远 远 超 
出 了 笔者 的 美工 水 平 ， 不 但 配色 精美 而 且 线 条 简洁 。 但 是 由 于 本 章 要 介绍 在 项 目 中 使 用 
jQuery Mobile 的 方法 而 得 不 到 使 用 ， 这 实在 是 有 一 些 遗 憾 。 





读者 在 实际 开发 中 也 币 弟 会 遇 到 这 样 的 问题 ， 原 本 已 经 设计 好 了 一 套 方 案 〈 并 不 局 限于 界面 
设计 ) ， 但 是 当 进 度 已 经 进行 了 一 半 时 突然 发 现 了 一 个 更 好 的 想法 ， 这 时 可 能 就 会 纠结 要 不 要 更 
改 方案 。 
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本 书 由 于 有 要 求 必须 使 用 jQuery Mobile， 并 且 笔 者 也 没有 考虑 过 将 这 款 应 用 推 向 市 场 ， 
此 不 需要 为 此 而 纠结 ;而 对 于 读者 来 说 ， 电 到 类 似 的 情况 首先 要 考虑 时 间 上 是 否 允 许 ， 而 在 时 间 
允许 的 情况 下 则 要 尽 可 能 地 将 两 种 方案 不 同 的 地 方 分 别 实 现 再 进行 对 比 。 如 果 时 间 上 仅 够 实现 茶 
一 种 方案 ， 那 么 笔者 建议 还 是 坚持 原 有 方案 ， 在 有 余力 的 情况 下 再 去 尝试 新 的 方案 。 


1 OO. 纪 界面 的 实现 


以 上 已 经 设计 好 了 本 划 所 要 实现 应 用 的 界面 布局 ， 本 节 要 做 的 就 是 利用 jQuery Mobile 强大 
的 UI 控件 ， 让 这 种 布局 以 一 套 完整 界面 的 形式 展示 出 来 。 


16.4.1 联系 人 列表 的 实现 


首先 按照 图 16-8 中 所 设计 的 布局 ， 利 用 jQuery Mobile 实现 联系 人 列表 ， 具 体 的 实现 过 程 如 
范例 16-3 所 示 。 
【范例 16-3】 使 用 jQuery Mobile 实现 联系 人 列表 。 
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运行 后 的 界面 如 图 16-11 所 示 。 下 面 对 本 次 使 用 的 范例 代码 进行 讲解 。 


联系 人 列表 
Q Filter items... 
联系 人 
联系 人 
联系 人 


联系 人 
联系 人 
联系 人 
联系 人 





16-11 实现 后 的 联系 人 列表 界面 


首先 要 明确 的 一 点 是 ， 由 于 不 需要 开发 者 自己 编写 CSS， 并 且 各 个 元 素 之 间 的 显示 关系 都 
被 jQuery Mobile 做 出 了 完整 的 定义 ， 使 得 开发 者 不 需要 再 编写 大 量 的 代码 了 。 比 如 当 页 和 面 中 使 
用 顶部 栏 时 只 要 为 div 元 素 加 入 属性 data-role="header"， 那 么 该 元 素 就 会 显示 在 屏幕 的 最 顶端 ， 
而 不 需要 额外 对 它 的 位 置 进行 定义 。 

在 代码 的 开始 部 分 ， 首 先 要 将 需要 的 jQuery Mobile 的 脚本 和 CSS 样式 文件 引入 到 代码 中 ， 如 范 
例 第 8、10、12 行 所 示 ， 然 后 就 可 以 在 body 标签 中 开始 加 入 page 元 素 ， 如 范例 第 15 行 所 示 。 

本 范例 使 用 了 顶部 栏 和 尾部 栏 ， 分 别 为 div 标签 加 入 属性 data-role="header" 和 data- 
role="footer" 来 声明 。 为 了 保证 它们 始终 位 于 屏幕 的 项 部 和 底部 ， 并 且 不 会 对 列表 中 的 内 容 形 成 
遮挡 ， 需 要 对 它们 加 入 属性 data-position="fixed"， 如 范例 第 16 行 和 第 27 行 所 示 。 

然后 就 可 以 向 页 面 中 加 入 列表 了 ， 在 jQuery Mobile 中 ， 如 果 希 望 向 页 面 中 加 入 某 个 控件 只 
需要 为 相应 的 div 标签 指定 它 的 data-role 属性 即 可 ， 如 范例 第 28 行 所 示 。 考 虑 到 用 户 如 果 保 存 
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了 许多 联系 人 ， 在 查找 时 可 能 会 不 方便 ， 有 时 需要 通过 一 个 搜索 栏 来 帮助 用 户 查 找 相 应 的 联系 
人 ， 那 么 可 以 通过 为 列表 控件 加 入 属性 data-filter="true" 来 为 该 列表 加 入 一 个 具有 动态 查找 功能 
的 搜索 框 。 

之 后 就 可 以 按照 范例 第 21~24 行 的 样式 为 列表 中 加 入 内 容 了 ， 此 处 为 了 节约 篇 幅 省 略 了 一 
些 重复 的 内 容 ， 读 者 可 以 自行 加 入 进去 。 不 过 如 果 懒 得 加 入 内 容 而 完全 照抄 本 范例 的 代码 也 并 不 
影响 使 用 。 


16.4.2 ”新 建 联系 人 界面 的 实现 


实现 了 联系 人 列表 之 后 ， 再 来 实现 一 个 新 建 联系 人 的 界面 ， 新 建 一 个 HTML 文件 并 命名 为 
create.html， 按 照 范 例 16-4 所 示 输 入 代码 。 
【范例 16-4】 使 用 jQuery Mobile 实现 新 建 联系 人 界面 。 
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运行 之 后 界面 如 图 16-12 所 示 。 


返回 新 建 联系 人 


联系 人 姓名 : 

请 输入 联系 人 姓名 
联系 人 号 码 : 

请 输入 联系 人 号 码 





16-12 新建 联 系 人 界面 


可 以 通过 界面 左上 角 的 “返回 ”按钮 取消 新 建 联系 人 的 操作 ， 也 可 以 点 击 底部 的 “创建 联系 
人 ”来 保存 填写 好 的 联系 人 信息 。 

通过 代码 可 以 看 出 ， 本 例 的 整体 结构 与 范例 16-3 非常 类 似 ， 只 是 将 列表 控件 取消 并 加 入 了 
一 个 名 为 content 的 元 素 ， 见 范例 16-4 第 20~25 行 所 示 ， 其 中 包含 了 两 个 标签 和 两 个 文本 编辑 
框 。 通 过 范例 16-4 中 的 代码 可 以 看 出 ，label 声明 了 标签 控件 ， 可 以 通过 设置 它 的 for 属性 使 之 
与 和 它 具 有 相同 id 的 编辑 框 对 应 。 另 外 ， 为 文本 编辑 框 指定 属性 placeholder， 可 以 设置 该 编辑 
框 中 的 提示 字符 属性 ， 如 图 16-12 中 可 以 看 到 编辑 框 中 有 “请 输入 联系 人 姓名 ”字样 。 


16.4.3 ”短信 编辑 界面 的 实现 


本 节 中 将 继续 实现 短信 编辑 界 惫 ， 实 际 上 本 小 节 的 任务 非常 集 单 ， 只 需要 在 范例 16-6 的 基 
础 上 稍 作 修 改 就 可 以 了 。 新 建 一 个 文件 命名 为 send.html， 先 将 范例 16-4 中 的 内 容 复 制 过 来 ， 再 


er 
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按照 范例 16-5 中 的 内 容 对 它 进行 修改 。 
【范例 16-5】 使 用 jQuery Mobile 实现 短信 编辑 界面 。 





是 不 是 与 范例 16-4 的 内 容 非 常 相似 呢 ? 甚至 是 更 加 简单 了 ， 运 行 之 后 的 界面 如 图 16-13 所 
示 。 由 于 过 于 简单 ， 笔 者 这 里 就 不 再 对 范例 做 太 多 介绍 了 。 
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16-13 发送 短信 界面 


但 是 在 iOS 的 开发 中 ， 因 为 相关 权限 问题 ， 开 发 在 调用 系统 短信 发 送 功能 的 时 候 是 必须 调 
整 到 苹果 提供 的 界面 的 ， 对 安里 开发 感 兴趣 的 同学 可 以 答 试 上 面 的 界面 。 


界面 功能 的 买 现 


以 上 已 经 实现 了 在 16.3 节 中 设计 的 界面 ， 然 而 这 还 不 够 ， 因 为 在 以 上 设计 的 联系 人 列表 中 
的 联系 人 是 固定 的 ， 而 在 实际 使 用 中 的 联系 人 列表 是 由 Cordova 在 用 户 的 手机 中 获取 的 。 这 束 导 
致 了 在 范例 16-3 中 所 实现 的 界面 是 无 法 拿 来 直接 使 用 的 ， 而 本 节 的 任务 怠 是 对 它 做 一 些 修 改 ， 
使 它 变 成 一 套 趴 正 有 用 的 界面 。 





16.5.1 联系 人 数据 的 生成 


在 进行 对 界面 的 修改 之 前 需要 先 实现 一 段 简单 的 脚本 ， 用 于 生成 一 些 简单 的 联系 人 数据 ， 这 
样 一 来 不 但 测试 更 加 方便 ， 而 且 只 需要 在 最 后 一 步 时 加 入 使 用 Cordova 获取 的 联系 人 信息 ， 就 可 
以 直接 使 用 了 。 

还 记得 在 前 面 实现 的 新 闻 应 用 吗 ? 可 以 说 整个 过 程 都 是 在 PC 端 实现 的 ， 只 有 最 后 才 需 要 在 
虚拟 机 或 者 是 真 机 上 进行 测试 。 笔 者 非常 享受 这 样 的 开发 过 程 ， 因 为 这 比 完全 在 虚拟 机 中 测试 要 
有 效率 得 多 。 本 章 的 项 目 由 于 要 使 用 到 一 些 API 而 不 得 不 在 开发 中 使 用 虚拟 机 测试 ， 但 是 如 果 
能 够 将 不 需要 API 的 部 分 与 需要 API 的 部 分 尽量 地 分 离 ， 使 得 大 多 数 工 作 能 够 在 PC 端 进行 测 
试 ， 这 无 疑 也 是 很 好 的 。 

由 于 JavaScript 并 不 是 一 种 真正 面 癌 对 象 的 语言 ， 而 是 一 种 基于 面 癌 对 象 思想 的 脚本 语言 ， 
因此 没有 办 法 去 实现 一 个 专门 的 类 用 于 保存 联系 人 信息 ， 但 是 却 可 以 当 作 真实 的 有 这 样 的 类 存 
在 ， 只 要 按照 一 定 的 语法 使 用 就 可 以 了 。 
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事实 上 在 本 书 前 面 的 内 容 中 也 常常 提 到 Cordova 封装 了 某 个 类 (比如 Contact 类 ) ， 但 是 实 
际 上 这 些 类 也 是 根本 不 存在 的 ， 但 是 由 于 JavaScript 的 特性 却 可 以 让 用 户 像 真正 存在 这 些 类 
一 样 对 对 象 进行 操作 。 





在 本 项 目 中 需要 一 个 类 Person， 在 Person 类 中 封装 了 联系 人 的 姓名 、 号 码 等 信息 ， 在 具体 
使 用 时 可 以 按照 如 下 所 示 的 方法 来 实现 : 





下 面 开 始 利用 这 段 代 码 让 联系 人 信息 “动态 地 ”加 载 到 jQuery Mobile 所 实现 的 联系 人 列表 
上 去 ， 具 体 实 现 方法 如 范例 16-6 所 示 。 
【范例 16-6】 让 联系 人 动态 地 显示 在 联系 人 列表 。 








【 第 16 章 实战 Cordova 制作 号 码 本 
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运行 之 后 的 界面 如 图 16-14 所 示 。 当 用 户 点 击 屏幕 上 的 列表 项 时 ， 会 以 对 话 框 的 形式 弹出 当 
前 选中 的 联系 人 的 信息 ， 如 图 16-15 和 图 16-16 所 示 。 


联系 人 列表 


Q Filter items... 


© 
© 
© 
© 
© 
© 
ke 
© 
© 





16-14 ”动态 加 载 出 的 联系 人 列表 
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index.html 
你 想 给 第 5 个 人 打 电 话 ,他 叫 : 联系 人 4, 他 
的 电话 


index.html 


你 想 给 第 5 个 人 发 短信 ,他 叫 : 联系 人 4 他 
:041144。 » 
本 的 电话 号 码 是 :041144。 


OK Ok 





16-15 点击 联 系 人 名 称 时 弹出 的 对 话 框 16-16 ”点击 列表 项 右 侧 按 钮 时 弹出 的 对 话 杠 


本 范例 虽然 看 起 来 简单 没有 涉及 什么 新 的 内 容 ， 但 却 非常 难以 掌握 ， 尤 其 是 在 jQuery 
Mobile 中 动态 地 加 载 页 面 控件 一 直 令 许多 新 手感 到 困扰 。 在 此 将 对 范例 中 第 14~30 行 的 代码 进 
行 详细 讲解 。 

首先 是 在 JavaScript 中 为 对 象 使 用 数组 的 方法 ， 在 前 面 已 经 提 到 过 在 JavaScript 中 实际 是 不 
存在 类 的 ， 但 是 在 JavaScript 中 却 可 以 将 任何 一 个 元 素 都 当 作 对 象 来 使 用 。 因 此 ， 在 需要 为 对 象 
定义 数组 时 ， 只 需要 声明 一 个 数组 ， 然 后 像 正 常 使 用 对 象 一 样 去 使 用 其 中 的 每 一 个 元 素 就 可 以 
了 ， 如 范例 第 19~21 行 所 示 。 但 是 要 注意 在 第 18 行 中 还 有 一 句 代 码 : 


如 果 没 有 它 的 存在 ， 是 不 能 将 元 素 people[1 当 作对 象 来 对 每 个 属性 进行 赋值 的 。 
生成 了 联系 人 信息 之 后 ， 要 做 的 就 是 如 何 将 这 些 信息 在 屏幕 上 显示 出 来 ， 找 到 范例 16-3 中 
的 第 21~24 行 代码 如 下 所 示 : 





它 的 作用 是 声明 列表 中 的 一 个 列表 项 ， 也 是 列表 中 实际 被 显示 出 来 的 部 分 ， 在 该 范例 中 要 做 
的 实际 上 也 就 是 将 这 部 分 的 内 容 使 用 脚本 加 载 到 页 和 面 当中 去 。 除 此 之 外 ， 为 了 给 用 户 的 操作 加 入 
啊 应 ， 比 如 当 用 户 点 击 列表 项 时 进行 拨打 电话 的 操作 ， 还 要 对 这 段 代 码 做 一 点 小 小 的 修改 。 修 改 
后 的 内 容 如 下 : 





其 中 call 和 message 分 别 是 对 用 户 操 作 进 行 响应 的 自 定义 函数 ， 见 范例 中 第 36~50 行 所 示 。 
而 为 了 让 系统 能 够 知道 用 户 到 底 选 择 了 哪个 列表 则 需要 为 这 两 个 图 数 加 入 一 个 参数 ， 即 上 面 代码 
中 的 1， 在 实际 使 用 时 ， 该 数字 与 相应 联系 人 的 id 属性 对 应 ， 由 系统 进行 分 配 。 

在 范例 的 第 25~31 行 ， 就 是 在 JavaScript 中 生成 这 段 代 码 时 所 使 用 的 字符 拼接 方法 ， 然 后 可 
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以 使 用 jQuery 提供 的 append(0 方 法 将 它们 加 入 到 列表 中 去 〈 如 范例 第 31 行 所 示 ) 。 如 果 仅 仅 是 
这 样 ， 看 到 的 结果 就 一 定 会 是 如 图 16-17 所 示 的 界面 。 


新 加 入 的 对 象 并 没有 
个 泻 染 成 已 该 有 的 样式 


新 建 联系 人 





16-17 ”新 加 入 的 元 素 并 没有 被 泻 染 成 该 有 的 样式 


这 是 由 于 jQuery Mobile 实际 上 就 是 一 组 CSS 样式 ， 但 是 在 开发 者 使 用 它 时 不 需要 知道 这 些 
样式 具体 是 哪 一 个 ， 而 是 由 jQuery Mobile 的 脚本 在 页 面 被 加 载 时 动态 地 进行 分 配 的 。 但 是 当 页 
面 被 加 载 完 毕 之 后 ， 如 果 页 面 上 的 内 容 发 生 了 改变 ，jQuery Mobile 是 不 知道 的 ， 因 此 也 不 会 对 
新 加 入 的 元 素 进行 泻 染 。 

那 该 怎么 办 呢 ? 一 个 比较 策 的 办 法 是 直接 到 jQuery Mobile 的 CSS 文件 中 找到 与 列表 项 对 应 
的 样式 ， 然 后 利用 JavaScript 对 它 进 行人 工 加 载 。 聪 明 的 开发 者 应 该 会 查阅 文档 或 者 是 阅读 本 章 
的 内 容 之 后 ， 使 用 本 范例 第 32 行 所 使 用 的 方法 对 被 改变 的 元 素 样式 进行 刷新 。 


得 多 员 由 于 目前 使 用 jQuery Mobile 开发 的 应 用 大 多 是 基于 Web 的 ， 可 以 利用 后 台 的 脚本 来 实现 刷 
” ”新 ， 因 此 可 能 用 不 到 这 种 对 空间 样式 进行 刷新 的 功能 。 但 是 当 利用 jQuery Mobile 和 Cordova 
进行 本 地 应 用 的 开发 时 ， 由 于 开发 者 可 以 依靠 的 只 剩 下 JavaScript 了 ， 这 种 刷新 的 技能 就 变 






得 非常 重要 。 


16.5.2 ”页 面 的 整合 


以 上 已 经 实现 了 对 联系 人 的 动态 加 载 ， 那 么 本 小 节 要 将 范例 进行 一 次 整合 ， 将 它们 合并 到 同 
一 个 页 面 中 去 。 实 现 的 方法 如 范例 16-7 所 示 。 

【范例 16-7】 最 终 实现 的 完整 功能 界面 。 
OU <TDOCTEYPENEImL > 
020 “heml> 


03 <head> 
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
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从 范例 代码 中 不 难看 出 ， 实 际 上 本 范例 的 主要 部 分 就 是 将 3 个 范例 的 主要 HTML 代码 全 部 
复制 到 了 本 范例 的 body 标签 中 。 其 中 第 92~107 行 来 自 范例 16-8 的 第 54~69 行 ， 是 联系 人 列表 
界面 ; 第 51 行 是 我 们 直接 调用 我 们 刚才 自 定 义 插件 的 发 送 短信 的 接口 ， 第 108~127 行 来 自 于 范 
例 16-6 的 第 15~33 行 ， 用 于 作为 新 建 联 系 人 界面 来 显示 。 但 是 在 运行 该 页 面 后 的 界面 与 图 16-13 
没有 什么 区 别 ， 只 显示 了 联系 人 列表 界面 。 那 么 页 面 中 新 加 入 的 内 容 都 到 哪里 去 了 呢 ? 

这 是 由 于 jQuery Mobile 在 对 页 面 进行 泻 染 时 ， 会 默认 只 显示 页 面 中 id 为 home 的 那个 页 
面 ， 但 是 在 本 范例 的 第 92 和 109 行 可 以 看 到 ， 在 此 次 改动 中 为 每 一 个 page 控件 加 入 了 一 个 id， 
却 并 没有 找到 id 值 为 home 的 页 面 。 此 时 ，jQuery Mobile 会 默认 只 演 染 第 一 个 页 面 。 

当 需 要 时 可 以 通过 链接 的 方式 在 各 个 页 面 之 间 进 行 切换 ， 如 第 85 行 和 第 103 行 所 示 。 

除 此 之 外 ， 还 可 以 看 到 在 此 次 页 面 合 并 中 ， 笔 者 新 加 入 了 一 些 页 面 的 啊 应 ， 如 第 123 行 的 
onClick 属性 等 ， 用 于 为 下 一 步 加 入 API 留 下 接口 。 除 此 之 外 ， 还 在 页 面 中 对 脚本 进行 了 添加 和 
修改 。 目 前 所 实现 的 界面 功能 如 下 : 

实现 了 联系 人 列表 的 动态 加 载 ， 如 图 16-14 所 示 。 本 范例 将 get_contacts() 方 法 进行 了 修改 ， 
仅 保 留 了 生成 联系 人 数据 的 部 分 而 将 原本 显示 联系 人 的 部 分 封装 到 了 函数 show_List 中 。 

第 48~52 行 处 的 message 图 数 获取 了 被 用 户 选中 的 联系 人 的 id， 并 将 其 保存 到 变量 
contact Id 中 ， 然 后 修改 短信 编辑 页 和 面 中 顶部 栏 的 内 容 ， 并 切换 至 该 界面 。 

当 用 户 编 辑 完 短信 后 ， 可 以 点 击 屏幕 底部 的 发 送 按钮 ， 此 时 会 执行 在 第 54~66 行 处 的 函数 
send。 通 过 阅读 此 处 代码 可 以 看 出 ， 该 函数 正 是 通过 获取 contact Id 的 值 来 判断 要 将 短信 发 送 给 
哪个 联系 人 的 。 

此 外 ， 还 实现 了 新 建 联系 人 以 及 在 新 建 联系 人 之 后 返回 联系 人 列表 ， 并 将 新 建 的 联系 人 显示 
在 屏幕 上 的 功能 ， 如 图 16-18 和 图 16-19 所 示 。 而 此 时 如 果 点 击 联 系 人 列表 项 则 能 够 获得 该 联系 
人 的 信息 ， 如 图 16-20 所 示 ， 该 部 分 功能 在 范例 中 的 第 68~87 行 所 示 。 
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16-18 在 新 建 联系 人 界面 新 建 联系 人 


联系 人 列表 


index.html 
你 想 给 第 11 个 人 打 电 话 , 他 叫 : jack, 他 的 
电话 号 码 是 :9999。 


OK 


OOOOOO0O0QO00O0QO0 


\ 


新 建 联 系 人 





16-19 ”可 以 看 到 新 创建 的 联系 人 被 显示 出 来 16-20 点击 列表 项 则 会 显示 新 创建 的 联系 人 信息 


1 日. 日 、 最 终 功能 的 实现 


通过 以 上 的 努力 ， 可 以 说 本 项 目 已 经 实现 得 将 不 多 了 ， 现 在 我 们 要 做 的 就 是 刚才 代码 中 45 
行 的 : 
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蔡 换 成 : 


然后 在 手机 机 上 测试 一 下 看 看 有 没有 达到 预想 的 效果 。 


i 6./7 小 结 


本 章 不 但 补 齐 了 书 中 没有 介绍 的 Cordova 插件 实现 方法 ， 还 在 项 目 中 使 用 了 jQuery 
Mobile， 因 此 本 章 对 于 初学 者 来 说 是 很 有 学 习 价 值 的 。 除 此 之 外 ， 读 者 在 学 习 完 本 章 内 容 后 还 要 
深入 思考 一 些 更 加 复杂 的 问题 ， 比 如 怎么 解决 Cordova 获取 联系 人 效率 的 问题 ， 以 及 如 何 将 本 地 


存储 应 用 到 项 目 中 。 人 至 此 ， 本 书 的 实战 项 目 束 全 部 结束 了 。 
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